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.

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);

{ 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);

{ 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()));

[ [ '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);

{ 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);

{ a: [ 1, 3, 6 ], b: [ 2, 4 ], c: [ 5, 7 ] }

kohliami558i

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-array
• javascript-object
• javaScript
• JavaScript-Methods

+2 More