To add a key/value pair to each object in a JavaScript array, you can use any of the following methods –
- Use the forEach() method to iterate over the array and add the key/value pair to each object.
- Use the map() method to create a new array with the added key/value pair.
- Use the reduce() method to create an object with the added key/value pair.
Let’s discuss each of these methods in detail below.
Add A key/value Pair To Each Object In A JavaScript Array
Use The forEach() Method
The forEach() method is used to iterate over an array and execute a callback function on each element of the array. The callback function takes two arguments – the element value and the element index.
We can use the forEach() method to add a key/value pair to each object in an array as follows:
var arr = [{name: "John"}, {name: "Smith"}];
arr.forEach(function (element, index) {
element["id"] = index + 1;
});
console.log(arr);// output –
[{
id: 1,
name: “John”
}, {
id: 2,
name: “Smith”
}]
In the above code, we have an array of objects – arr. We use the forEach() method to iterate over the array and add a new key/value pair to each object. The key is “id” and the value is index+1.
We then print the updated array to the console.
Use The map() Method
The map() method is used to create a new array from the existing array. It executes a callback function on each element of the array and returns the new array. The callback function takes two arguments – the element value and the element index.
We can use the map() method to add a key/value pair to each object in an array as follows:
var arr = [{name: "John"}, {name: "Smith"}];
var newArr = arr.map(function (element, index) {
element["id"] = index + 1;
return element;
});
console.log(newArr);// output –
[{
id: 1,
name: “John”
}, {
id: 2,
name: “Smith”
}]
In the above code, we have first created an array named newArr using the map() method. The map() method executes the callback function on each element of arr and returns a new array with the added key/value pair.
Use The reduce() Method
The reduce() method is used to apply a function on each element of the array and reduce it to a single value. The callback function takes two arguments – the accumulator (acc) and the current element value.
We can use the reduce() method to add a key/value pair to each object in an array as follows:
var arr = [{name: "John"}, {name: "Smith"}];
var newObj = arr.reduce(function (acc, element, index) {
element.id = index + 1;
acc.push(element);
return acc;
}, []);
console.log(newObj);//Output –
[{
id: 1,
name: “John”
}, {
id: 2,
name: “Smith”
}]
In the above code, we have used the reduce() method to add an id key to each object in the arr array. We have initialized the accumulator with an empty array and pushed each element with the added id key into it. Finally, we have returned the accumulator which contains all the objects with the added id key.
Conclusion
As you can see from the above examples, all three methods – forEach(), map(), and reduce() – can be used to add a key/value pair to each object in a JavaScript array.
Which method you choose to use will depend on your specific requirements. However, if you just want to iterate over the array and add the key/value pair, then the forEach() method is the simplest and most efficient option.
If you want to create a new array with the added key/value pair, then map() is the best option.