Merge 2 arrays of object based on specific object key

I have 2 arrays which is contains same id with different value (inside selected) My goal is to merge both become 1 array.

When I use spread operator like this:

data = [
  ...data.filter(
    (a) => a.id === newData.id
  ),
  newData];

It comes the data being override

First array

[
 {
    id: "A527CFFE",
    selected: [
      {
        itemId: "A1",
        text: "Selected 1"
      }
    ]
 }
]

Second array

[
 {
    id: "A527CFFE",
    selected: [
      {
        itemId: "A2",
        text: "Selected 2"
      }
    ]
 }
]

How can I make both of arrays become 1 ? the expected result:

[
 {
    id: "A527CFFE",
    selected: [
      {
        itemId: "A1",
        text: "Selected 1"
      },
      {
        itemId: "A2",
        text: "Selected 1"
      }
    ]
 }
]

What am I doing wrong in the above?

Answer

You can use Array.reduce() to combine the two arrays into one.

We start by concatenating and then grouping by id. For each item with the same ids we combine the selected arrays.

const arr1 = [ { id: "A527CFFE", selected: [ { itemId: "A1", text: "Selected 1" } ] } ]
const arr2 = [ { id: "A527CFFE", selected: [ { itemId: "A2", text: "Selected 2" } ] } ]

const result = Object.values([...arr1, ...arr2].reduce((acc, { id, selected }) => { 
    acc[id] = acc[id] || { id, selected: [] };
    acc[id].selected = [...acc[id].selected, ...selected];
    return acc;
}, {}));

console.log('Result:', result);

.as-console-wrapper { max-height: 100% !important; }