"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > How to Group Objects by Multiple Properties and Aggregate Values in JavaScript?

How to Group Objects by Multiple Properties and Aggregate Values in JavaScript?

Published on 2024-12-25
Browse:319

How to Group Objects by Multiple Properties and Aggregate Values in JavaScript?

Grouping Objects by Multiple Properties and Aggregating Values

In the task of grouping objects in an array by multiple properties, a common requirement is to not only group by these properties but also sum up the values of certain object properties. However, a solution that simply nests all duplicates in a two-dimensional array is insufficient.

Problem Statement

Consider an array of objects that must be grouped by shape and color. Objects in this array are considered duplicates only if both their shape and color are the same. For duplicate objects, we need to sum up their used and instances values and remove the duplicates, resulting in a concise list of objects with unique shapes and colors.

Solution

To effectively solve this problem, we can leverage the Array#reduce method in conjunction with a helper object that tracks encountered shape and color combinations:

const arr = [
  { shape: 'square', color: 'red', used: 1, instances: 1 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 4 },
  { shape: 'circle', color: 'red', used: 1, instances: 1 },
  { shape: 'circle', color: 'red', used: 1, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 5 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
];

const helper = {};
const result = arr.reduce((r, o) => {
  const key = `${o.shape}-${o.color}`;

  if (!helper[key]) {
    // If it's a unique combination, add to the helper and result array
    helper[key] = Object.assign({}, o);
    r.push(helper[key]);
  } else {
    // If it's a duplicate, update the values in the helper
    helper[key].used  = o.used;
    helper[key].instances  = o.instances;
  }

  return r;
}, []);

console.log(result);

Output:

[
  { shape: "square", color: "red", used: 5, instances: 3 },
  { shape: "circle", color: "red", used: 2, instances: 1 },
  { shape: "square", color: "blue", used: 11, instances: 9 },
  { shape: "circle", color: "blue", used: 0, instances: 0 }
]

This solution efficiently groups the objects by shape and color, aggregates their used and instances values for duplicate objects, and removes any remaining duplicates, resulting in the desired output.

Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3