CODEWITHSUNDEEP
javascript
COD3
COD3

Reputation: 111

How to merge nested array with main object in javascript

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'}
 ];

Upvotes: 0

Views: 111

Answers (4)

Nick Parsons
Nick Parsons

Reputation: 50854

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

Upvotes: 1

Dani
Dani

Reputation: 2036

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

Upvotes: 0

Tachibana Shin
Tachibana Shin

Reputation: 3908

use this:

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

Upvotes: 0

gog
gog

Reputation: 11347

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.

Upvotes: 2

Related Questions