Update array of objects with array of objects

Question

My apologies if this has been addressed before, but I couldn't get it to work with anything I found.

Assume I have 2 arrays - arr1, arr2. I want to update the objects in arr1 if the the property id matches in arr1 and arr2. Objects that exist in arr2 but not in arr1 - meaning the property id does not exist in arr1 - should be pushed to arr1.

Example:

let arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
]

let arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}
] 

# Expected Outcome

let outcome = [
  {id: 0, name: "Mark"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"},
  {id: 4, name: "Sara"}
]

Please include what you found and what you've tried so that people don't waste their time giving you answers you've already tried. For instance, this looks exactly the same as [Merge 2 arrays of objects](https://stackoverflow.com/q/7146217/215552)... — Heretic Monkey, Jun 16 '20 at 20:30
Does this answer your question? [Merge 2 arrays of objects](https://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects) — Heretic Monkey, Jun 16 '20 at 20:33

score 1 · Answer 1 · answered Jun 16 '20 at 20:37

1

You can use reduce and find for this:

const arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
];

const arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}
];

arr2.reduce((res, item) => {
  const existingItem = res.find(x => x.id === item.id);
  if (existingItem) { existingItem.name = item.name; }
  else { res.push(item); }
  return res;
}, arr1);

console.log(arr1);

answered Jun 16 '20 at 20:37

blex

24,941
5
39
72

1

Aha, difference of just a few seconds again :D – ABGR Jun 16 '20 at 20:40
1

Haha yes, again :) – blex Jun 16 '20 at 20:41

score 1 · Answer 2 · answered Jun 16 '20 at 20:38

You could do this:

 let arr1 = [
      {id: 0, name: "John"},
      {id: 1, name: "Sara"},
      {id: 2, name: "Domnic"},
      {id: 3, name: "Bravo"}
    ]

    let arr2 = [
      {id: 0, name: "Mark"},
      {id: 4, name: "Sara"}
    ] 
    
    var res = arr1.reduce((acc, elem)=>{
       var x = arr2.find(i=>i.id === elem.id);
       
       if(x){
          acc.push(x)
       }else{
         acc.push(elem)
       }
       return acc
    }, []);
    
    console.log(res)

score 0 · Answer 3 · answered Jun 16 '20 at 20:38

Assuming you want to mutate the objects in arr1 rather than creating new ones, one way to do it would be using for...of to iterate the objects in arr2 and then check if there's already an object with the same id in arr1 using Array.prototype.find():

If there is one, you mutate it with Object.assign.
Otherwise, push the new object to arr1:

const arr1 = [
  { id: 0, name: 'John' },
  { id: 1, name: 'Sara' },
  { id: 2, name: 'Domnic' },
  { id: 3, name: 'Bravo' },
];

const arr2 = [
  { id: 0, name: 'Mark', sometingElse: 123 },
  { id: 2, foo: 'bar' },
  { id: 4, name: 'Sara' },
];

for (const currentElement of arr2) {
  let previousElement = arr1.find(el => el.id === currentElement.id);
  
  if (previousElement) {
    Object.assign(previousElement, currentElement);
  } else {
    arr1.push(currentElement);
  }
}

console.log(arr1);

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

Sven.hig · Answer 4 · 2020-06-16T21:11:31.870

if you want to try something different you can use foreach and filter to achieve this

let arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
]

let arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}]


  arr1.forEach(x=>{
    arr2.forEach(y=>{
      if(x.id==y.id){
        x.name=y.name
      }
    })
  })
 arr2.filter((a)=>{if(!arr1.some(b=>a.id==b.id)) arr1.push(a)})


  console.log(arr1)

score -1 · Answer 5 · answered Jun 16 '20 at 20:33

You should be able to use Array.prototype.find to sort this out!

let arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
];

let arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}
];

let updateArrayOfObjects = (arr1, arr2) => {
  for (let obj of arr2) {
    let item = arr1.find(v => v.id === obj.id);
    if (item) item.name = obj.name;
    else      arr1.push({ ...obj });
  }
  return arr1;
};

console.log(updateArrayOfObjects(arr1, arr2));

Update array of objects with array of objects

5 Answers5