How to Merge Duplicate Keys and Sum Their Values in a JavaScript Object Array?

Merging Duplicate Keys and Summing Values in an Object Array

In JavaScript, working with arrays of objects can be common. Sometimes, we may encounter the need to group and modify objects within an array while conserving specific properties. One such scenario involves summing up values associated with similar keys.

Let's explore this task with an example array of objects:

const objects = [
  { name: 'P1', value: 150 },
  { name: 'P1', value: 150 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];

Our goal is to group objects by the 'name' property and sum the 'value' property for each distinct 'name'. The desired output should look like this:

[
  { name: 'P1', value: 300 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];

To achieve this, we can utilize JavaScript's object and array manipulation capabilities. Here's a step-by-step solution:

1. Create an Object to Store Summed Values

Begin by creating an empty JavaScript object called 'holder' that will serve as a container for storing summed values for each 'name'.

2. Iterate over the Input Array

Use a 'forEach' loop to iterate over each object in the input array ('objects').

3. Check for Existing Names in 'holder'

Inside the loop, check if the current object's 'name' property already exists as a property in the 'holder' object using 'hasOwnProperty(d.name)'.

4. Sum or Initialize Values

If the 'name' property exists, add the 'value' property of the current object to the corresponding property in 'holder' (e.g., 'holder[d.name] = d.value'). If the 'name' property is not found, initialize it with the 'value' property of the current object ('holder[d.name] = d.value').

5. Create a New Array with Merged Objects

Once all values have been summed, create a new empty array called 'obj2' to store the merged objects.

6. Iterate over 'holder' and Push Merged Objects

Use another loop to iterate over the 'holder' object's properties ('for (var prop in holder)'). For each property, create a new object with 'name' and 'value' properties and push it into 'obj2'.

7. Log the Output

Finally, log the 'obj2' array to the console to view the merged objects with summed 'value' properties.

Example Code

Here's a code snippet that demonstrates the solution:

const objects = [
  { name: 'P1', value: 150 },
  { name: 'P1', value: 150 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];

const holder = {};

objects.forEach(d => {
  if (holder.hasOwnProperty(d.name)) {
    holder[d.name] += d.value;
  } else {
    holder[d.name] = d.value;
  }
});

const obj2 = [];

for (var prop in holder) {
  obj2.push({ name: prop, value: holder[prop] });
}

console.log(obj2);

By following these steps, you can effectively group and sum values associated with similar keys in an array of objects, creating a new array with modified objects as per the desired output.

The above is the detailed content of How to Merge Duplicate Keys and Sum Their Values in a JavaScript Object Array?. For more information, please follow other related articles on the PHP Chinese website!