Merging elements in an array in a subarray with same key

Question

I am really confused why this approach is not working. I have two arrays, so I am iterating over the main array and then comparing the keys to copy the corresponding record in the array. This is the data example:

let r2 = [
    {
        "record_guid": "cb7fba9b-e8fc-40c8-9a2c-9ba2e06d1392",
        "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit," 
    },
    {
        "record_guid": "9f0689e7-1fff-4731-9e60-35c80b62fd33",
        "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit," 
    },
    {
        "record_guid": "b61c72a8-5c83-485e-8366-6f4a56d28b55",
        "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit," 
    }
];

let r1= [
  {
    "record_guid": "5e3dc291-662d-4ca0-895b-6272d51156fb",
    "record_id": 1,
    "parent_record_id": null,
    "description": "Introduction",
    "sub_records": [
        {
            "record_guid": "cb7fba9b-e8fc-40c8-9a2c-9ba2e06d1392",
            "record_id": 10,
            "parent_record_id": 1,
            "description": "Background",
            "sub_records": [],
        },
        {
            "record_guid": "9f0689e7-1fff-4731-9e60-35c80b62fd33",
            "record_id": 11,
            "parent_record_id": 1,
            "description": "Details",
            "sub_records": [],
        },
        {
            "record_guid": "b61c72a8-5c83-485e-8366-6f4a56d28b55",
            "record_id": 12,
            "parent_record_id": 1,
            "description": "Regulations",
            "sub_records": [],
        },
        
            ],
        }
    ],
}
];

Something like this should work:

const mergeById = (r1, r2) =>
    r1.map(itm => ({
        ...r2.find((item) => (item.record_guid === itm.record_guid) && item),
        ...itm
    }));

console.log(mergeById(r1, r2));

Or this other similar version:

let merged = [];

for(let i=0; i<r1.length; i++) {
  merged.push({
   ...r1[i], 
   ...(r2.find((itmInner) => itmInner.record_guid === r1[i].record_guid))}
  );
}
 
console.log(merged);

I am just not getting the comments field in the corresponding array element. Do you know why this is not working to copy the second array into the first array to get something like the following?

[
  {
    "record_guid": "5e3dc291-662d-4ca0-895b-6272d51156fb",
    "record_id": 1,
    "parent_record_id": null,
    "description": "Introduction",
    "sub_records": [
        {
            "record_guid": "cb7fba9b-e8fc-40c8-9a2c-9ba2e06d1392",
            "record_id": 10,
            "parent_record_id": 1,
            "description": "Background",
            "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            "sub_records": [],
        },
        {
            "record_guid": "9f0689e7-1fff-4731-9e60-35c80b62fd33",
            "record_id": 11,
            "parent_record_id": 1,
            "description": "Details",
            "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            "sub_records": [],
        },
        {
            "record_guid": "b61c72a8-5c83-485e-8366-6f4a56d28b55",
            "record_id": 12,
            "parent_record_id": 1,
            "description": "Regulations",
            "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            "sub_records": [],
        },
        
            ],
        }
    ],
}
]

Answer 1

Based on the output,the sub_records need to be mapped over & the spread operator should spread the original object before the find method's result.

const mergeById = (r1, r2) =>
r1.map(itm => {
 itm.sub_records = itm.sub_records.map(sub_item => (
     { ...sub_item,
         ...r2.find(r2_item => r2_item.record_guid === sub_item.record_guid),
     }
    )
    )
  
   return itm 
})

console.log(mergeById(r1,r2))