How to Replace an Object in an Array with Another Object Based on Property ?
Last Updated :
27 Feb, 2024
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' }
]
Similar Reads
How to Update an Array of Objects with Another Array of Objects using Lodash? Updating an array of objects with another array of objects involves merging or updating objects in the first array with corresponding objects from the second array. Below are the approaches to updating an array of objects with another array of objects in the Lodash library:Table of ContentUsing loda
4 min read
Updating a Property of an Object in an Array within a MongoDB Document In MongoDB, it's common to store complex data structures within documents, including arrays of objects. Updating the property of an object within such an array can be a frequent requirement in many applications. This article will explore various methods to achieve this task, covering concepts like a
3 min read
How to Remove a Property from All Objects in an Array in JavaScript? To remove a property from all objects in an array in JavaScript, you can use the forEach() method to iterate over each object in the array and use the delete operator to remove the specified property.Example:JavaScriptconst arrayOfObjects = [ { name: "Alice", age: 25, city: "New York" }, { name: "Bo
2 min read
How to Check Presence of a Specific Object Property in an Array ? Checking for the presence of a specific object property in an array involves determining whether any object within the array possesses the specified property. This task is commonly encountered when working with arrays of objects and needing to verify if a particular property exists across any of the
3 min read
How to modify an object's property in an array of objects in JavaScript ? Modifying an object's property in an array of objects in JavaScript involves accessing the specific object within the array and updating its property.Using the Array.map() methodUsing the map() method to create a new array by transforming each element of the original array based on a specified funct
5 min read
How to copy properties from one object to another in ES6 ? The properties of one object can be copied into another object through different methods. Here are some of those methods. Object.assign(): By using the Object.assign() method, all enumerable properties of one or more source objects are copied to the target object. This method returns the modified ta
3 min read
How to Add Duplicate Object Key with Different Value to Another Object in an Array in JavaScript ? Adding duplicate object keys with different values to another object in an array in JavaScript refers to aggregating values under the same key from multiple objects in an array, creating a new object where each key corresponds to an array of associated values. Table of Content Using for...of LoopUsi
4 min read
Remove Array Element Based on Object Property in JavaScript Here are the several methods that can be used to remove array elements based on object property in JavaScript1. Using the filter() methodThe filter() method is useful if you want to preserve the original array and create a new one without the element(s) you want to remove.JavaScriptlet a = [{ id: 1,
4 min read
How to Filter an Array of Objects Based on Multiple Properties in JavaScript ? Filtering an array of objects based on multiple properties is a common task in JavaScript. It allows us to selectively extract items from an array that satisfy specific conditions. We will explore different approaches to achieve this task.These are the following approaches:Table of ContentUsing the
6 min read
How to Convert an Array of Objects into an Array of Arrays ? An Array of objects is an array that contains multiple objects as its elements which can be converted into an array of arrays i.e. an array that contains multiple arrays as its elements. There are several methods listed below to achieve this task. Table of Content Using Object.keys() and Object.valu
3 min read