How to modify an object’s property in an array of objects in JavaScript ?
Last Updated :
20 Dec, 2023
Modifying an object’s property in an array of objects in JavaScript involves accessing the specific object within the array and updating its property. In this article we are going to see how to modify an object’s property in an array of objects in JavaScript
Below are the approaches to modify an object’s property in an array of objects in JavaScript:
Approach 1: Using the Array.map() method
Using the map() method to create a new array by transforming each element of the original array based on a specified function.
Syntax:
arr.map((element) => { /* … */ });
Example: In this example, The map() method creates a new array with the employee_name modified to “Rahul” for the object with employee_id 2.
Javascript
let employees_data = [
{
employee_id: 1,
employee_name: "Aman",
},
{
employee_id: 2,
employee_name: "Bhargava",
},
{
employee_id: 3,
employee_name: "Chaitanya",
},
];
const modifiedEmployees = employees_data.map(obj => {
if (obj.employee_id === 2) {
return { ...obj, employee_name: "rahul" };
}
return obj;
});
console.log(modifiedEmployees);
|
Output
[
{ employee_id: 1, employee_name: 'Aman' },
{ employee_id: 2, employee_name: 'rahul' },
{ employee_id: 3, employee_name: 'Chaitanya' }
]
Using a for loop to traverse an array of objects, finding and modifying the property of a specific object as per a condition.
Syntax:
for ( variable of iterableObjectName) {
...
}
Example: In this example, we will try to use the same array of objects which we have created previously, and then we will use the for-of loop in order to update the existing object’s property’s value.
Javascript
let employees_data = [
{
employee_id: 1,
employee_name: "Aman",
},
{
employee_id: 2,
employee_name: "Bhargava",
},
{
employee_id: 3,
employee_name: "Chaitanya",
},
];
for (let object of employees_data) {
if (object.employee_id === 2) {
object.employee_name = "Anthony";
}
}
console.log("Updated Data: ");
console.log(employees_data);
|
Output
Updated Data:
[
{ employee_id: 1, employee_name: 'Aman' },
{ employee_id: 2, employee_name: 'Anthony' },
{ employee_id: 3, employee_name: 'Chaitanya' }
]
Using Array.map() to create a new array with the spread operator to modify specific object properties.
Syntax:
employees_data.map((employee) => {
if (employee.employee_id === 2) {
return {
...employee,
employee_name: "Anthony",
};
}
return employee;
});
Example: In this example, we will use Array.map() method as well as spread operator (…) for spreading the object itself in order to update the existing object’s property value by using the same array of objects created previously.
Javascript
let employees_data = [
{
employee_id: 1,
employee_name: "Aman",
},
{
employee_id: 2,
employee_name: "Bhargava",
},
{
employee_id: 3,
employee_name: "Chaitanya",
},
];
let new_updated_data =
employees_data.map((employee) => {
if (employee.employee_id === 2) {
return {
...employee,
employee_name: "Anthony",
};
}
return employee;
});
console.log("Updated Data: ");
console.log(new_updated_data);
|
Output
Updated Data:
[
{ employee_id: 1, employee_name: 'Aman' },
{ employee_id: 2, employee_name: 'Anthony' },
{ employee_id: 3, employee_name: 'Chaitanya' }
]
Approach 4: Using forEach() method
Using forEach() method, iterate through the array of objects, check the condition, and modify the property of the matching object.
Syntax:
array.forEach(callback(element, index, arr), thisValue);
Example: In this example, we are using the above-explained approach.
Javascript
let employees_data = [
{
employee_id: 1,
employee_name: "Aman",
},
{
employee_id: 2,
employee_name: "Bhargava",
},
{
employee_id: 3,
employee_name: "Chaitanya",
},
];
const modifyProperty = (arr, targetId, newProperty) => {
arr.forEach(obj => {
if (obj.employee_id === targetId) {
obj.employee_name = newProperty;
}
});
};
modifyProperty(employees_data, 2, "Ankit");
console.log(employees_data);
|
Output
[
{ employee_id: 1, employee_name: 'Aman' },
{ employee_id: 2, employee_name: 'Ankit' },
{ employee_id: 3, employee_name: 'Chaitanya' }
]
Using find() to search for the object with the specified property value, and destructuring to modify the property.
Syntax:
array.find(function(currentValue, index, arr),thisValue);
Example: In this example, we will modify the employee_name property for the object with employee_id equal to 2 to “Kavita”.
Javascript
let employees_data = [
{
employee_id: 1,
employee_name: "Aman",
},
{
employee_id: 2,
employee_name: "Bhargava",
},
{
employee_id: 3,
employee_name: "Chaitanya",
},
];
const modifyProperty = (arr, targetId, newProperty) => {
const targetObj = arr.find(obj => obj.employee_id === targetId);
if (targetObj) {
targetObj.employee_name = newProperty;
}
};
modifyProperty(employees_data, 2, "Kavita");
console.log(employees_data);
|
Output
[
{ employee_id: 1, employee_name: 'Aman' },
{ employee_id: 2, employee_name: 'Kavita' },
{ employee_id: 3, employee_name: 'Chaitanya' }
]
The Javascript arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right) and the return value of the function is stored in an accumulator.
Syntax:
array.reduce( function(total, currentValue, currentIndex, arr),
initialValue );
Example: In this example, the Array.reduce() method is used to iterate through the array. If the current object’s id matches the target id, a new object with the updated property is created and pushed to the accumulator array.
Javascript
const array = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
];
const targetId = 2;
const updatedName = 'Geek';
const modifiedArray = array.reduce((acc, obj) => {
if (obj.id === targetId) {
const modifiedObj = { ...obj, name: updatedName };
acc.push(modifiedObj);
} else {
acc.push(obj);
}
return acc;
}, []);
console.log(modifiedArray);
|
Output
[
{ id: 1, name: 'John' },
{ id: 2, name: 'Geek' },
{ id: 3, name: 'Doe' }
]
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...