array.map() not returning a single array

Question

I have the code below which I expect to map the result from the nested array and return a single array having both id's but I get 2 arrays instead. Can someone please guide me on what I'm doing wrongly?

arrayVal = [{
    sources: {
      data: [{
        id: 1
      }]
    }
  },
  {
    sources: {
      data: [{
        id: 2
      }]
    }
  }
]

for (let sub of arrayVal) {
  let result = sub.sources.data.map(x => (x.id))
  console.log(result)
}

"_I get 2 arrays instead_" No you don't, you get a single array twice. — Teemu, May 23 '18 at 04:37
This may help: [Merge/flatten an array of arrays in JavaScript?](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript) — Jonathan Lonowski, May 23 '18 at 04:38

CertainPerformance · Answer 1 · 2018-05-23T04:44:32.487

4

Right now, you're calling map for each element in arrayVal, so you get two arrays. Use reduce instead, to transform an array of objects into another array that's not necessarily one-to-one with the input elements:

const arrayVal=[{sources:{data:[{id:1}]}},{sources:{data:[{id:2}]}}];

const result = arrayVal.reduce((a, { sources: { data } }) => (
  [...a, ...data.map(({ id }) => id)]
), []);
console.log(result)

edited May 23 '18 at 04:44

answered May 23 '18 at 04:39

CertainPerformance

356,069
52
309
320

score 3 · Answer 2 · answered May 23 '18 at 04:39

arrayVal = [{
    sources: {
      data: [{
        id: 1
      }]
    }
  },
  {
    sources: {
      data: [{
        id: 2
      }]
    }
  }
]

let result = [];
for (let sub of arrayVal) {
  result = result.concat(sub.sources.data.map(x => (x.id)))

}

console.log(result)

I think concat is what you were missing here, Hope this is what you trying to achieve

Nikhil Aggarwal · Accepted Answer · 2018-05-23T04:47:16.683

Try following

var arrayVal = [{sources: {data: [{id: 1}]}},{sources: {data: [{id: 2}]}}];

// Create an array on sources.data and merge it into 1 collection (array)
var result = arrayVal.reduce((a, c) => [...a, ...c.sources.data.map(({id}) => id)], []);

console.log(result);

For reference, Array.reduce

Also, you can improve your code as follows

var arrayVal = [{sources: {data: [{id: 1}]}},{sources: {data: [{id: 2}]}}];

let result = [];
for (let sub of arrayVal) {
  result.push(sub.sources.data.map(x => (x.id)));
}
console.log([].concat(...result))

score 1 · Answer 4 · answered May 23 '18 at 04:46

1

Try this

arrayVal = [{
    sources: {
      data: [{
        id: 1
      }]
    }
  },
  {
    sources: {
      data: [{
        id: 2
      }]
    }
  }
]

let result = arrayVal.map((x) => x.sources.data[0].id)
console.log(result)

answered May 23 '18 at 04:46

ekbgh

36
3

This does not work if `data` has more than one element. – CertainPerformance May 23 '18 at 04:46

score 1 · Answer 5 · answered May 23 '18 at 04:48

You can do something like this:

arrayVal = [{
    sources: {
      data: [{
        id: 1
      }]
    }
  },
  {
    sources: {
      data: [{
        id: 2
      }]
    }
  }
]

var flat = arrayVal.reduce(function(prev,curr,cI){
  prev.push(curr.sources.data.map(x => (x.id))[0]);
  return prev; // *********  Important ******
}, []);

array.map() not returning a single array

5 Answers5