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"}
] 

Answer 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);

Answer 2

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)

Answer 3

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

Answer 4

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)

Answer 5

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