Mapping data with 2 dimensional array with AXIOS and VueJs

Question

I'm a beginner in vuejs and I'd like to map my data response in a two-dimensional table.

This is my data:

[{
  "origine": "",
  "nb": 15
}, {
  "origine": "?",
  "nb": 18
}, {
  "origine": "?L",
  "nb": 1
}, {
  "origine": "G",
  "nb": 298
}, {
  "origine": "I",
  "nb": 51
}, {
  "origine": "L",
  "nb": 1735
}, {
  "origine": "L?",
  "nb": 1
}, {
  "origine": "O",
  "nb": 4
}]

After mapping I want the data to be like this:

[
  ['', 15],
  ['?', 18],
  ['?L', 1],
  ['G', 298],
  ['I', 51],
  ['L', 1735],
  ['L?', 1],
  ['O', 4]
]

Or like this :

[
  '': 15,
  '?': 18,
  '?L': 1, 
  'G': 298, 
  'I': 51, 
  'L': 1735, 
  'L?': 1, 
  'O': 4
]

So far I've written this:

getResultcivitas(localisation) {
  axios
    .get('../api/civitasorigine/' + this.searchInputcivitas)
    .then(response => {this.origines = response.data.map (x => x.origine)})
}

I've find this but I don't know how to spell it out in my axios query.

map = origines.map(obj => {
  var rObj = {};
  rObj[obj.origine] = obj.nb;
  return rObj;
});

Rahul Bhobe · Accepted Answer · 2020-06-19 11:11:26Z

3

Just return an array from the map functions' callback with item.origine and item.nb

let data = [{
  "origine": "",
  "nb": 15
}, {
  "origine": "?",
  "nb": 18
}, {
  "origine": "?L",
  "nb": 1
}, {
  "origine": "G",
  "nb": 298
}, {
  "origine": "I",
  "nb": 51
}, {
  "origine": "L",
  "nb": 1735
}, {
  "origine": "L?",
  "nb": 1
}, {
  "origine": "O",
  "nb": 4
}]

let mappedData = data.map(item => {
  return [item.origine, item.nb];
})

console.log(mappedData)

edited Jun 19, 2020 at 11:11

Rahul Bhobe

4,4714 gold badges19 silver badges35 bronze badges

answered Jun 19, 2020 at 9:45

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Léo-Paul Dubourg Over a year ago

I have formulated my second question about the objects in VueJs on this topic. Can you help me stackoverflow.com/questions/62531807/…

BroiSatse · Accepted Answer · 2020-06-19 09:52:50Z

2

Well, you literally have all the answers, you just need to combine them:

axios
  .get('../api/civitasorigine/' + this.searchInputcivitas)
  .then(response => {
    this.origines = response.data.map(obj => {
      const rObj = {};
      rObj[obj.origine] = obj.nb;
      return rObj;
    })
  })

answered Jun 19, 2020 at 9:52

BroiSatse

44.8k8 gold badges63 silver badges89 bronze badges

Collectives™ on Stack Overflow

Mapping data with 2 dimensional array with AXIOS and VueJs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related