How to merge nested array with main object in javascript

Question

Sample Data

const data = [{ id: 1,iitems: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

 data.map((item) => item.items).data.reduce((acc, curr) => acc.concat(curr), [])
 
 console.log(data)

What I'm trying to do here is to merge the nested to one array. but the output is like this.

data = [
{ id: 1, name: 'R1'},
{ id: 1, name: 'R2'},
{ id: 1, name: 'R3'}]

Expected output:

 data = [
    { id: 1 },
    { id: 1, name: 'R1' },
    { id: 2 },
    { id: 1, name: 'R2'},
    {id: 1, name: 'R3'}
 ];

Why is { "id": 1, "name": "R2"} not in your expected output? — Nick Parsons
– Nick Parsons, Commented Dec 19, 2022 at 8:27
Doesn't it make sense to have an array of items if you want an array and an array of objects you want references to the original ids? — eroironico
– eroironico, Commented Dec 19, 2022 at 8:28

gog · Accepted Answer · 2022-12-19 08:29:36Z

2

You can "flatten" your structure like this:

let flatten = obj => [obj, ...(obj.items || []).flatMap(flatten)]

let result = data.flatMap(flatten)

Note that this performs "deep" flattening, that is, works with sub-objects containing deeper items arrays.

answered Dec 19, 2022 at 8:29

gog

11.4k2 gold badges29 silver badges42 bronze badges

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

Comments

Nick Parsons · Accepted Answer · 2022-12-19 08:58:42Z

1

You can use .flatMap() where you destructure items and the rest of the object properties into their own object (r). Then you can return an array from the .flatMap() to merge all items together into the one resulting array:

const data = [{ id: 1,items: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

const res = data.flatMap(({items, ...r}) => [r, ...items]);
console.log(res);

edited Dec 19, 2022 at 8:58

answered Dec 19, 2022 at 8:30

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Comments

Tachibana Shin · Accepted Answer · 2022-12-19 08:31:52Z

0

use this:

const newData = data.map(item => [{id: item.id}, ...item.items]).flat(1)

answered Dec 19, 2022 at 8:31

Tachibana Shin

4,0561 gold badge11 silver badges15 bronze badges

1 Comment

Tachibana Shin Over a year ago

can i ask why do you need to do this?

Dani · Accepted Answer · 2022-12-19 08:57:26Z

0

Be carefull, you have iitems and items, name error, but here is an aproach:

var data = [{ id: 1,items: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

var dataNew = [];

data.forEach(element => {
  dataNew.push({
        id: element.id
      })
  if(element.items.length>0){
    element.items.forEach(elementInner => {
      
        dataNew.push({
        id: element.id,
        name:elementInner.name
      })
    })
  }
})

console.log(dataNew)

Output:

0: Object { id: 1 }

1: Object { id: 1, name: "R1" }

2: Object { id: 2 }

3: Object { id: 2, name: "R2" }

4: Object { id: 2, name: "R3" }

length: 5

answered Dec 19, 2022 at 8:57

Dani

2,0862 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to merge nested array with main object in javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related