How to Replace an Object in an Array with Another Object Based on Property ?

In JavaScript, an array is a data structure that can hold a collection of values, which can be of any data type, including numbers, strings, and objects. When an array contains objects, it is called an array of objects.

Using findIndex and splice methods

You can use findIndex() to find the index of the object that matches the desired property, and then use splice() to replace the object at that index with the new object.

Example: The below example demonstrates how to replace an object in an array with another object based on a property in JavaScript using findIndex and splice methods.

Javascript

const array = [
    { id: 1, name: "Java", fees: "30000" },
    { id: 2, name: "Javascript", fees: "45000" },
    { id: 3, name: "Python", fees: "30000" },
];

const replaceObj =
    { id: 2, name: "Web Development", fees: "35000" };

const index = array.findIndex(
    (obj) => obj.id === replaceObj.id);
if (index !== -1) {
    array.splice(index, 1, replaceObj);
}
console.log(array);

Output

[
  { id: 1, name: 'Java', fees: '30000' },
  { id: 2, name: 'Web Development', fees: '35000' },
  { id: 3, name: 'Python', fees: '30000' }
]

Using filter and concat methods

You can use filter() to create a new array containing only the elements that don’t match the desired object, and then use concat() to merge the new object with the filtered elements. 

Example: The below example demonstrates the use of filter and concat methods to replace an object in an array with another object based on property in JavaScript.

Javascript

const array = [
    { id: 1, name: "Java", fees: "30000" },
    { id: 2, name: "Javascript", fees: "45000" },
    { id: 3, name: "Python", fees: "30000" },
];

const replaceObj =
    { id: 2, name: "Web Development", fees: "35000" };

const newArray = array
    .filter(
        (obj) => obj.id !== replaceObj.id)
    .concat(replaceObj);
console.log(newArray);

Output

[
  { id: 1, name: 'Java', fees: '30000' },
  { id: 3, name: 'Python', fees: '30000' },
  { id: 2, name: 'Web Development', fees: '35000' }
]

Using the map method

The map() method creates a new array with the results of calling a provided function on every element in the array. In this case, you can check for the property in the current element, and if it matches the desired value, replace it with the new object.

Example: The below example demonstrates the use of map() method to replace an object in an array with another object based on property in JavaScript.

Javascript

const array = [
    { id: 1, name: "Java", fees: "30000" },
    { id: 2, name: "Javascript", fees: "45000" },
    { id: 3, name: "Python", fees: "30000" },
];

const replaceObj =
    { id: 2, name: "Web Development", fees: "35000" };

const newArray = array.map((obj) =>
    obj.id === replaceObj.id ? replaceObj : obj
);
console.log(newArray);

Output

[
  { id: 1, name: 'Java', fees: '30000' },
  { id: 2, name: 'Web Development', fees: '35000' },
  { id: 3, name: 'Python', fees: '30000' }
]