How Can You Group and Sum an Array of Objects in jQuery Using the Reduce Method?

Grouping and Summing an Array of Objects in jQuery: A Detailed Guide

Grouping and summing values in an array of objects is a common task in programming. In jQuery, this can be achieved efficiently using the reduce() method.

Understanding the Goal

The aim is to group an array of objects based on a specific property, in this case, the "Id" property. Once the objects are grouped, the quantity ("qty") of each group should be summed up.

Step-by-Step Solution

1. Initialization: Create an empty array named result to store the grouped objects.

2. Loop Through the Array: Use the reduce() method to iterate through the array. This method takes two functions as parameters:

   • accumulator function: Accumulates the results of the previous iterations. It's typically represented as res or acc.
   • value function: Processes the current element in the array. It's typically represented as value or currentValue.
3. Grouping: Within the reduce() method, check if the accumulator object (res) has a property matching the current object's "Id" property. If not, initialize an object with the current "Id" as a property and a "qty" property initialized to 0, and push this object into the result array.
4. Summing: Update the "qty" property of the accumulator object corresponding to the current object's "Id" by adding the current object's "qty" value.
5. Return the Result: The reduce() method returns the final accumulator object. This object represents the grouped and summed array of objects.

Example Implementation

The following jQuery code snippet demonstrates the steps outlined above:

var array = [
  { Id: "001", qty: 1 },
  { Id: "002", qty: 2 },
  { Id: "001", qty: 2 },
  { Id: "003", qty: 4 }
];

var result = [];
array.reduce(function(res, value) {
  if (!res[value.Id]) {
    res[value.Id] = { Id: value.Id, qty: 0 };
    result.push(res[value.Id])
  }
  res[value.Id].qty += value.qty;
  return res;
}, {});

console.log(result);

This code will output the following grouped and summed array of objects:

[
  { Id: "001", qty: 3 },
  { Id: "002", qty: 2 },
  { Id: "003", qty: 4 }
]

The above is the detailed content of How Can You Group and Sum an Array of Objects in jQuery Using the Reduce Method?. For more information, please follow other related articles on the PHP Chinese website!