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 Loop
For...of loop in JavaScript, is used to iterate over an array of objects. For each object, check and accumulate values under the same key in another object, effectively grouping values by key.
Syntax:
for ( variable of iterableObjectName) {
// code block to be executed
}
Example: In this example we are using uses a for...of loop and a ternary operator to iterate through an array of objects (myArray). It creates a new object (resultObj) by aggregating values under duplicate keys.
const myArray = [
{ key: "id", value: 1 },
{ key: "name", value: "Amit" },
{ key: "id", value: 2 },
{ key: "name", value: "Kohli" },
];
const resultObj = {};
for (const obj of myArray) {
resultObj[obj.key]
? resultObj[obj.key].push(obj.value)
: (resultObj[obj.key] = [obj.value]);
}
console.log(resultObj);
const myArray = [ { key: "id", value: 1 }, { key: "name", value: "Amit" }, { key: "id", value: 2 }, { key: "name", value: "Kohli" },];const resultObj = {};for (const obj of myArray) { resultObj[obj.key] ? resultObj[obj.key].push(obj.value) : (resultObj[obj.key] = [obj.value]);}console.log(resultObj);Output
{ id: [ 1, 2 ], name: [ 'Amit', 'Kohli' ] }
Using reduce()
Reduce() method is used to iterate through an array of objects. It accumulate values under duplicate keys into a new object. If a key already exists, append the value; otherwise, create a new key-value pair.
Syntax:
array.reduce( function(total, currentValue, currentIndex, arr),
initialValue )
Example: In this example we are using reduce() method to iterate through an array of objects (myArray). It accumulates values under duplicate keys, creating a new object (resultObj).
const myArray = [
{ key: "id", value: 1 },
{ key: "name", value: "Bhavna" },
{ key: "id", value: 2 },
{ key: "name", value: "Sharma" },
];
const resultObj = myArray.reduce((acc, obj) => {
acc[obj.key] ? acc[obj.key].push(obj.value) : (acc[obj.key] = [obj.value]);
return acc;
}, {});
console.log(resultObj);
const myArray = [{ key: "id", value: 1 },{ key: "name", value: "Bhavna" },{ key: "id", value: 2 },{ key: "name", value: "Sharma" },];const resultObj = myArray.reduce((acc, obj) => {acc[obj.key] ? acc[obj.key].push(obj.value) : (acc[obj.key] = [obj.value]);return acc;}, {});console.log(resultObj);Output
{ id: [ 1, 2 ], name: [ 'Bhavna', 'Sharma' ] }
Using a Map for Multiple Values
Utilize a Map object to store multiple values for the same key. Initialize the key with an empty array, then push values into it. This approach allows for efficient storage and retrieval of key-value pairs with duplicate keys.
Example: The function addValueToKey adds values to a Map under the same key. For key 'key', it stores ['value1', 'value2']. Printing the map outputs the entries.
let map = new Map();
// Function to add a value to a key
function addValueToKey(key, value) {
if (!map.has(key)) {
map.set(key, []);
}
map.get(key).push(value);
}
// Add values to the same key
addValueToKey('key', 'value1');
addValueToKey('key', 'value2');
// Print the Map
console.log(Array.from(map.entries()));
let map = new Map();// Function to add a value to a keyfunction addValueToKey(key, value) { if (!map.has(key)) { map.set(key, []); } map.get(key).push(value);}// Add values to the same keyaddValueToKey('key', 'value1');addValueToKey('key', 'value2');// Print the Mapconsole.log(Array.from(map.entries()));Output
[ [ 'key', [ 'value1', 'value2' ] ] ]
Using forEach()
forEach() method is used to execute a provided function once for each array element. It is another way to iterate through an array of objects and accumulate values under duplicate keys into a new object.
Example: In this example, we use the forEach() method to iterate through an array of objects (myArray). It accumulates values under duplicate keys, creating a new object (resultObj).
const myArray = [
{ key: "id", value: 1 },
{ key: "name", value: "Alex" },
{ key: "id", value: 2 },
{ key: "name", value: "John" },
];
const resultObj = {};
myArray.forEach(obj => {
if (resultObj[obj.key]) {
resultObj[obj.key].push(obj.value);
} else {
resultObj[obj.key] = [obj.value];
}
});
console.log(resultObj);
const myArray = [ { key: "id", value: 1 }, { key: "name", value: "Alex" }, { key: "id", value: 2 }, { key: "name", value: "John" },];const resultObj = {};myArray.forEach(obj => { if (resultObj[obj.key]) { resultObj[obj.key].push(obj.value); } else { resultObj[obj.key] = [obj.value]; }});console.log(resultObj);Output
{ id: [ 1, 2 ], name: [ 'Alex', 'John' ] }
Using Object.entries() and forEach()
Another approach to aggregating values under the same key from multiple objects in an array is by utilizing Object.entries() in combination with forEach(). This method iterates over the entries of each object, grouping the values by key into a new object.
Example:
function aggregateValues(arr) {
const resultObj = {};
arr.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
if (resultObj[key]) {
resultObj[key].push(value);
} else {
resultObj[key] = [value];
}
});
});
return resultObj;
}
const myArray = [
{ a: 1, b: 2 },
{ a: 3, b: 4, c: 5 },
{ a: 6, c: 7 }
];
const resultObj = aggregateValues(myArray);
console.log(resultObj);
function aggregateValues(arr) { const resultObj = {}; arr.forEach(obj => { Object.entries(obj).forEach(([key, value]) => { if (resultObj[key]) { resultObj[key].push(value); } else { resultObj[key] = [value]; } }); }); return resultObj;}const myArray = [ { a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6, c: 7 }];const resultObj = aggregateValues(myArray);console.log(resultObj);Output
{ a: [ 1, 3, 6 ], b: [ 2, 4 ], c: [ 5, 7 ] }
