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

Grouping Objects by Multiple Properties and Aggregating Their Values

Grouping elements in an array by multiple properties is essential for data organization and summarization. To address the specific requirement of grouping objects by shape and color and aggregating their values, we can leverage the power of JavaScript's built-in methods.

Step 1: Array#reduce

The Array#reduce method provides a concise and efficient way to iterate over an array, accumulating a single output from the individual elements. In this case, we can use it to accumulate objects based on their combined shape and color properties.

Step 2: Helper Object

We employ a helper object to track unique combinations of shape and color. For each object in the array, we check if the combination exists in the helper by concatenating the shape and color properties. If it doesn't exist, we create a new entry in the helper object, and simultaneously push a copy of the current object into the result array.

Step 3: Value Aggregation

If a similar combination already exists in the helper object, we simply increment the used and instances values of the corresponding entry, effectively aggregating the values from the current object.

Step 4: Object Copying

To avoid modifying the original objects in the array, we create a copy using Object.assign. This ensures that the helper object contains independent copies of the objects, allowing us to aggregate values separately.

Implementation:

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]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    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 effectively aggregates objects by shape and color, providing a cohesive summary of the data.

The above is the detailed content of How to Group Objects by Multiple Properties and Aggregate Their Values in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!