Merge 2 arrays of object based on specific object key-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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

const res = arrA.map(e => { // map all items of first array
  const found = arrB.find(x => x.id === e.id) // find item in second array with same id
  return found // check if item has been found in second array
      ? {id: e.id, selected: [...e.selected, ...found.selected]} // if yes, merged selected 
      : e // if no, return only item from first array         
})

console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore this */