Use the map() function or findIndex() function to update Object in array JavaScript. Both methods are built-in array method is provided by JavaScript.
Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);Update Object in array JavaScript
Simple example code update an Object’s Property in Array of Objects.
Using map() function
This method iterates over the array. On each iteration, check if the current object is the one to be updated.
<!DOCTYPE html>
<html>
<body>
<script>
const osArray = [
{id: 0, name: "Windows"},
{id: 1, name: "Linux"},
{id: 2, name: "MacOS"},
];
const updatedOSArray = osArray.map(p =>p.id === 1
? { ...p, name: 'Ubuntu' }
: p
);
console.log(updatedOSArray);
</script>
</body>
</html> Output:
Using findIndex function
Find the index of the object using findIndex method. Store the index as a variable. Do a simple update like this: yourArray[indexThatyouFind].
<script>
let myArray = [
{id: 0, name: "Jhon"},
{id: 1, name: "Sara"},
{id: 2, name: "Domnic"},
{id: 3, name: "Bravo"}
],
objIndex = myArray.findIndex((obj => obj.id == 1));
myArray[objIndex].name = "Laila"
console.log(myArray[objIndex])
</script>Output: Object { id: 1, name: “Laila” }
How to update the values of every object in an array of objects in Javascript?
Answer: Update the value of the car in all objects in an array(data) with the values from newData. Just take the index of the object being iterated over, and look it up in the newData array.
const data = [
{ id: 1, car: "Toyota 2020", owner: "BM" },
{ id: 2, car: "Nissan", owner: "DK" },
{ id: 3, car: "Mazda", owner: "JA" },
{ id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];
const newCars = data.map((obj, i) => ({ ...obj, car: newData[i] }));
console.log(newCars);Output:
[
{
"id": 1,
"car": "Audi",
"owner": "BM"
},
{
"id": 2,
"car": "Bentley",
"owner": "DK"
},
{
"id": 3,
"car": "BMW",
"owner": "JA"
},
{
"id": 4,
"car": "Buick",
"owner": "DS"
}
]Do comment if you have any doubts or suggestions on this JS object topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version