CODEWITHSUNDEEP
javascript
Josh
Josh

Reputation: 2006

How do I create an flattened array of arrays that are part of an object in an array, essentially get the child arrays of multiple objects?

I'm sure this has been answered many times, but I guess I either don't know how to ask the question, or I'm not understanding how to apply concepts from simple array reduce/flatten situations into slightly more complex object arrays.

Say I have an array of objects 'Item' that has 2 properties, 'Name' and 'SubItems,' which is itself an array of objects with a 'Name' property.

Conceptually, something like this...

[
  { Name: 'Obj1', SubItems: [{Name: 'Sub1'}, {Name: 'Sub2'}, {Name: 'Sub'3}] }, 
  { Name: 'Obj2', SubItems: [{Name: 'Sub4'}, {Name: 'Sub5'}] }
]

What's a good way to "flatten" or "select many" of the SubItems, preferably just using javascript? Essentially, I want a single array of SubItems:

[
{Name: 'Sub1'},
{Name: 'Sub2'},
{Name: 'Sub3'},
{Name: 'Sub4'},
{Name: 'Sub5'}
]

Upvotes: 0

Views: 35

Answers (2)

Sebastian S
Sebastian S

Reputation: 4712

Use the reduce function with [] as initial value, as proposed in this answer:

var foo = [
  { Name: 'Obj1', SubItems: [{Name: 'Sub1'}, {Name: 'Sub2'}, {Name: 'Sub3'}] }, 
  { Name: 'Obj2', SubItems: [{Name: 'Sub4'}, {Name: 'Sub5'}] }
];
var bar = foo.reduce((a, b) => a.concat(b.SubItems), []);

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 371019

Sounds like you just need to extract the SubItems property. You can achieve this consisely by spreading into [].concat:

const input = [
  { Name: 'Obj1', SubItems: [{Name: 'Sub1'}, {Name: 'Sub2'}, {Name: 'Sub3'}] }, 
  { Name: 'Obj2', SubItems: [{Name: 'Sub4'}, {Name: 'Sub5'}] }
];

console.log(
  [].concat(...input.map(({ SubItems }) => SubItems))
);

Upvotes: 2

Related Questions