How to Replace an Object in an Array with Another Object Based on Property ?
Last Updated :
02 Feb, 2024
In JavaScript, replacing an object in an array with another object based on a specific property involves identifying and updating elements within the array. This task is essential when modifications to individual objects are required, such as updating values or swapping objects based on a particular property criteria.
Using map()
This method used the map function to create a new array by iterating over the original array. It checks a specific property to identify the target object for replacement. If the condition is met, a new object with updated values is returned; otherwise, the original object is retained.
Example: Demonstrate the creation of a new array by applying a function to each element in the existing array using a map().
Javascript
const books = [
{ title: "Book1" , isbn: "12345" , edition: 1 },
{ title: "Book2" , isbn: "67890" , edition: 2 },
{ title: "Book3" , isbn: "54321" , edition: 1 },
];
const updatedBooksMap = books.map((book) => {
if (book.isbn === "67890" ) {
return { ...book, edition: 3 };
}
return book;
});
console.log(updatedBooksMap);
|
Output
[
{ title: 'Book1', isbn: '12345', edition: 1 },
{ title: 'Book2', isbn: '67890', edition: 3 },
{ title: 'Book3', isbn: '54321', edition: 1 }
]
Using findIndex() and splice()
The findIndex method is used to locate the index of the object in the array based on a specific property. If the index is found, the splice function is used to replace the existing object with a new one. This approach directly modifies the original array.
Example: Demonstration to find the index of the element based on the property using findIndex and then replace concatenate using splice.
Javascript
const books = [
{ title: "Book1" , isbn: "12345" , edition: 1 },
{ title: "Book2" , isbn: "67890" , edition: 2 },
{ title: "Book3" , isbn: "54321" , edition: 1 },
];
const indexToReplace =
books.findIndex((book) => book.isbn === "67890" );
if (indexToReplace !== -1) {
const updatedBooksSplice = [...books];
updatedBooksSplice.splice(indexToReplace, 1, {
...books[indexToReplace],
edition: 3,
});
console.log(updatedBooksSplice);
}
|
Output
[
{ title: 'Book1', isbn: '12345', edition: 1 },
{ title: 'Book2', isbn: '67890', edition: 3 },
{ title: 'Book3', isbn: '54321', edition: 1 }
]
Using filter() and concat()
The filter method is applied to exclude the object to be replaced, and the concat function is used to append a new object with updated values. This method creates a new array without modifying the original one, making it suitable for scenarios where immutability is desired. It offers a clean and declarative way to achieve the replacement.
Example: In this, filter out the object to be replaced using the filter function and then concatenate the new object using the concat.
Javascript
const books = [
{ title: "Book1" , isbn: "12345" , edition: 1 },
{ title: "Book2" , isbn: "67890" , edition: 2 },
{ title: "Book3" , isbn: "54321" , edition: 1 },
];
const updatedBooksFilterConcat = books
.filter((book) => book.isbn !== "67890" )
.concat({ title: "Book2" , isbn: "67890" , edition: 3 });
console.log(updatedBooksFilterConcat);
|
Output
[
{ title: 'Book1', isbn: '12345', edition: 1 },
{ title: 'Book3', isbn: '54321', edition: 1 },
{ title: 'Book2', isbn: '67890', edition: 3 }
]
Share your thoughts in the comments
Please Login to comment...