how to add object in nested array of objects without mutating original source

Question

I have multi nested array of objects, in which I need to merge objects in the grandChildren based on the id without mutation

Details ......

###Example

  let arr1 = {
  "initiateLevel": true,
  "parent": [
    {
      "name": "level1",
      "childrens": [
        {
          "group": "Level-group",
          "grandChildrens": [
            {
              "id": 21,
              "technology": "sp1",
              "path": "l2"
            },
            {
              "id": 22,
              "technology": "sp2",
              "path": "l2"
            }
          ]
        }
      ]
    },
    {
      "name": "level2",
      "childrens": [
        {
          "group": "Level-group-2",
          "grandChildrens": [
            {
              "id": 121,
              "technology": "sp12",
              "path": "l4"
            },
            {
              "id": 122,
              "technology": "sp22",
              "path": "l4"
            }
          ]
        }
      ]
    }
  ]
}

ex: Below object needs to merged with the array based on the id

 let newobj=  
 [
      {
        "id": 22,
        "reason": "reason 2",
        "phase": "phase 2",
        "reviewer": "by user 2",
        "date": "date 2"
      },
      {
        "id": 21,
        "reason": "reason 1",
        "phase": "phase 1",
        "reviewer": "by user 1",
        "date": "date 1"
      }
    ]

expected output:

{
  "initiateLevel": true,
  "parent": [
    {
      "name": "level1",
      "childrens": [
        {
          "group": "Level-group",
          "grandChildrens": [
            {
              "id": 21,
              "technology": "sp1",
              "path": "l2",
              "reason": "reason 1",
              "phase": "phase 1",
              "reviewer": "by user 1",
              "date": "date 1"
            },
            {
              "id": 22,
              "technology": "sp2",
              "path": "l2",
              "reason": "reason 2",
              "phase": "phase 2",
              "reviewer": "by user 2",
              "date": "date 2"
            }
          ]
        }
      ]
    },
    {
      "name": "level2",
      "childrens": [
        {
          "group": "Level-group-2",
          "grandChildrens": [
            {
              "id": 121,
              "technology": "sp12",
              "path": "l4"
            },
            {
              "id": 122,
              "technology": "sp22",
              "path": "l4"
            }
          ]
        }
      ]
    }
  ]
}

I tried to like this. but it's not working

const merge = (y, z) => {
  y.parent.forEach((element) => {
    element.childrens.forEach((x) => {
      x.grandChildrens.forEach((test) => {
        const reviewIndex = z.findIndex(
          (reviewItem) => reviewItem.id === test.id
        );
        if(reviewIndex>=0)
        {
         return  {...test, ...z[reviewIndex]}  
        }
        
      });
    });
  });
};

merge(arr1,newobj)

How to merge the object based on the id without mutation.

Answer 1

Use Array.prototype.map instead, forEach gets no returns

 let newobj = [ { id: 22, reason: 'reason 2', phase: 'phase 2', reviewer: 'by user 2', date: 'date 2' }, { id: 21, reason: 'reason 1', phase: 'phase 1', reviewer: 'by user 1', date: 'date 1' } ]; let arr1 = { initiateLevel: true, parent: [ { name: 'level1', childrens: [ { group: 'Level-group', grandChildrens: [ { id: 21, technology: 'sp1', path: 'l2', reason: 'reason 1', phase: 'phase 1', reviewer: 'by user 1', date: 'date 1' }, { id: 22, technology: 'sp2', path: 'l2', reason: 'reason 2', phase: 'phase 2', reviewer: 'by user 2', date: 'date 2' } ] } ] }, { name: 'level2', childrens: [ { group: 'Level-group-2', grandChildrens: [ { id: 121, technology: 'sp12', path: 'l4' }, { id: 122, technology: 'sp22', path: 'l4' } ] } ] } ] }; const merge = (y, z) => { const parent = y.parent.map((element) => { return { ...element, childrens: element.childrens.map((x) => { return { ...x, grandChildrens: x.grandChildrens.map((test) => { return { ...test, ...z.find((reviewItem) => reviewItem.id === test.id) }; }) }; }) } }); return { ...y, parent }; }; const arr2 = merge(arr1, newobj); console.log(arr2);