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)
}

Answer 1

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)

Answer 2

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))