How to update array of object from another object array?

Question

I have two object arrays. One is main array and another one is temp array. I need to compare main array with temp array and based on matching id, I have update the value in the main array from temp array.

For example, id 2 & 3 is matching in both the arrays. So I need to update value in the main array from temp array.

// Main array
this.MyArray = [
    { id: "0", value: "Car" },
    { id: "1", value: "Bike" },
    { id: "2", value: "Train" },
    { id: "3", value: "Bus" },
    { id: "4", value: "Van" }
]

// temp array
this.tempArray =[
    { id: "2", value: "Car" },
    { id: "3", value: "Jet" },
]

//Expected Output in the Main array:
this.MyArray = [
    { id: "0", value: "Car" },
    { id: "1", value: "Bike" },
    { id: "2", value: "Car" },
    { id: "3", value: "Jet" },
    { id: "4", value: "Van" }
]

You can just loop over the temp array following this https://stackoverflow.com/questions/44120645/angular-update-object-in-object-array I like even the second answer — Marco Massetti, Oct 21 '22 at 13:22
@MarcoMassetti - In that example one is object and another one is object array but in my case both are array of objects. — Tech Learner, Oct 21 '22 at 13:28
`this.tempArray.ForEach(item =>{ this.MyArray.find(myitem => myitem.id == item.id).name = item.name; });` — Marco Massetti, Oct 21 '22 at 13:53

score 2 · Accepted Answer · edited Jun 24 '23 at 23:51

Immutable option. Creating a new Array based on the myArray with updates from the tempArray:

this.myArray = this.myArray.map((mainObject) => {
  const tempObject = this.tempArray.find((tempObject) => tempObject.id === mainObject.id);

  if (typeof tempObject !== "undefined") {
    return {
       ...mainObject,
       value: tempObject.value,
    };
  }

  return mainObject;
});

Mutable option. Looping over the tempArray and replacing the objects in the myArray with the relevant object from the tempArray:

this.tempArray.forEach((tempObject) => {
  const mainObjectIndex = this.myArray.findIndex((mainObject) => mainObject.id === tempObject.id);

  if (mainObjectIndex !== -1) {
    this.myArray[mainObjectIndex] = tempObject;
  }
});

score 1 · Answer 2 · answered Oct 21 '22 at 15:05

To update myArray with values of tempArray, you can use the reduce operator, in order to do it in an immutable way :

tempArray.reduce((existingEntries, tempEntry) => {
      const duplicateEntry = existingEntries.find((entry) => entry.id === tempEntry.id)
      if (duplicateEntry && duplicateEntry.value !== tempEntry.value) {
        const duplicateIndex = existingEntries.indexOf(duplicateEntry)
        return [...existingEntries.slice(0, duplicateIndex), tempEntry, ...existingEntries.slice(duplicateIndex + 1)]
      } else {
        return existingEntries
      }
    },
    myArray
  )

Use myArray as the initial value of your new array, and compare the entries contained in your tempArray to check if you should add them or not.

Focus on immutability is a good practice and brings a lot of advantages. This post is explaining properly why you should focus on immutability : What is immutability and why should I worry about it?

How to update array of object from another object array?

2 Answers2