es6 iterate through an array of objects with nested arrays and return a single array?

Question

Given the following scenario, how can I return a single array?

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let convo = array.map(item => {
  return {
    name: item.name,
    ...item.arr,
  };
});

https://jsfiddle.net/3ng8dc2x/1/

I would like to get something like:

[
  {name: "name01"}, 
  {name: "inner01"}, 
  {name: "inner02"}, 
  {name: "inner03"},
  {name: "name02"},
  {name: "inner04"}, 
  {name: "inner05"}, 
  {name: "inner06"}
]

As always any and all direction is appreciated, so thanks in advance!

Mark · Accepted Answer · 2019-04-11 04:20:06Z

5

If you are writing for the latest browsers and latest node, flatMap() is perfect for this:

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let flat = array.flatMap(({name, arr}) => [{name}, ...arr])
console.log(flat)

edited Apr 11, 2019 at 4:20

answered Apr 11, 2019 at 3:57

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

3 Comments

Get Off My Lawn Over a year ago

just noticed, the result is missing name01 and name02

Code Maniac Over a year ago

And you missed adding name key's in output name01 and name02

Mark Over a year ago

@GetOffMyLawn it's a fair warning, but I think it's an overstatement to say MDN doesn't suggest using it. It just isn't supposed everywhere yet, but if it is supported where you need, it works well.

Get Off My Lawn · Accepted Answer · 2019-04-13 16:30:19Z

2

Array reduce might be a better option than map.

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let convo = array.reduce((a, {name, arr}) => a.concat([{name}], arr), []);
console.log(convo)

edited Apr 13, 2019 at 16:30

answered Apr 11, 2019 at 3:57

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

2 Comments

Code Maniac Over a year ago

on side note:- And you missed adding name keys in output name01 and name02

studiobrain Over a year ago

Because of the nature of my use case and the preference for concise code, this will work great! Thanks! ...and thanks for all of the different views and directions to solve for this!

Shidersz · Accepted Answer · 2019-04-11 04:22:00Z

One possible solution is to combine Array.reduce() with Object.entries and for every entry of the current inspected object, check the type to decide how to put the element on a new array:

let array = [
  {
    name: "name01", 
    surname: "surname01", 
    arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]
  },
  {
    name: "name02",
    surname: "surname02",  
    arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]
  }
];

let res = array.reduce((acc, curr) =>
{
    Object.entries(curr).forEach(([k, v]) =>
    {
        if (typeof v === 'string')
            acc.push({[k]: v});
        else if (Array.isArray(v))
            acc.push(...v);
    });

    return acc;
}, []);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Note, the previous is likely a generic solution, however, if you can trust on the structure of your objects, i.e, they all have a name property holding a string and an array on the property arr, then the code can be simplified:

let array = [
  {
    name: "name01", 
    arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]
  },
  {
    name: "name02", 
    arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]
  }
];

let res = array.reduce(
    (acc, {name, arr}) => acc.concat([{name}, ...arr]),
    []
);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Code Maniac · Accepted Answer · 2019-04-11 04:11:16Z

0

You can use reduce and destructuring assignment

let array = [{name: "name01", arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]},
{name: "name02", arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]}]

let op = array.reduce((op,{name,arr}) =>op.concat([{name}],arr),[])

console.log(op)

edited Apr 11, 2019 at 4:11

answered Apr 11, 2019 at 4:02

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

es6 iterate through an array of objects with nested arrays and return a single array?

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related