Merge object nested arrays into a single new array

Question

Given the object below, I'm looking for a clean and efficient way to create an array from each item's "subItems" array.

const items = [{
    'a': 'a1',
    'b': 'b1',
    'subItems': [
        {'c': 'c1'},
        {'d': 'd1'}
    ]
  },
  {
    'e': 'e1',
    'subItems': [
      {'f': 'f1'},
      {'g': 'g1'}
    ]
  }
];

So for this example, the result I would need is:

const groupedSubItems = [{c: c1},{d:d1},{f:f1},{g:g1}];

Currently I'm just looping through and concatting all the arrays but it does not feel like the best way to handle this:

let groupedSubItems = [];
items.forEach(function(item) {
  if (item.subItems) {
    groupedSubItems = groupedSubItems.concat(item.subItems);
  }
});

Note: All subitems arrays will only be one level down as shown, with the same key, and may or may not exist.

Answer 1

You can use concat with spread syntax and map method to create array of subitems.

 const items = [{"a":"a1","b":"b1","subItems":[{"c":"c1"},{"d":"d1"}]},{"e":"e1","subItems":[{"f":"f1"},{"g":"g1"}]}] const subItems = [].concat(...items.map(({subItems}) => subItems || [])); console.log(subItems) 

Answer 2

First you want to get only the subitems:

var itemsSubItems = items.map(function(item) { return item.subItems; });
// [ [ { item: 1 }, { item: 2 } ], [ { item: 3 } ] ]

This gives you an array of arrays. Each element in the array still represents an item: the sub items of that item. You now want just the array of subitems though, not delimited by item.

var subItems = itemsSubItems.reduce(function(si, current) {
  return si.concat(current);
}, []);

For each array-of-subitems in the outer array, concatenate them to a new array.

A shorter ES6 example:

const subItems = items.map(item => item.subItems).reduce((a, c) => a.concat(c), []);

Answer 3

You can easily achieve this by applying reduce over your array of items.

const items = [{"a":"a1","b":"b1","subItems":[{"c":"c1"},{"d":"d1"}]},{"e":"e1","subItems":[{"f":"f1"},{"g":"g1"}]}];

const subItems = items.reduce((acc, actual) => acc.concat(actual['subItems']||[]),[]);

Answer 4

you can use forEach and spread operator ... to achieve desired result

 const items = [{'a': 'a1','b': 'b1','subItems': [{'c': 'c1'},{'d': 'd1'}]},{'e': 'e1','subItems': [{'f': 'f1'},{'g': 'g1'}]}]; const subItems = []; items.forEach(obj => subItems.push(...obj.subItems)); console.log(subItems);