• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Grouping By Multiple Properties and Summing Using Javascript

Grouping By Multiple Properties and Summing Using Javascript

February 3, 2021 4 Comments

When processing data, it is very useful to be able to group by variables and calculate statistics for each group. In Javascript, we can use the reduce function to help us build a group by function.

Grouping Objects by Multiple Properties in Array in Javascript

Let’s say we have data such as the following:

var array = [
    {thing: 'ball', color: 'red', size: 'big', value: 10},
    {thing: 'bat', color: 'blue', size: 'small', value: 15},
    {thing: 'bat', color: 'red', size: 'small', value: 11}
    {thing: 'bat', color: 'red', size: 'small', value: 21},
    {thing: 'bat', color: 'red', size: 'big', value: 13},
    {thing: 'helmet', color: 'blue', size: 'medium', value: 30},
    {thing: 'helmet', color: 'red', size: 'medium', value: 13},
    {thing: 'helmet', color: 'blue', size: 'big', value: 30},
    {thing: 'bat', color: 'blue', size: 'medium', value: 14},
    {thing: 'ball', color: 'red', size: 'medium', value: 13},
    {thing: 'ball', color: 'blue', size: 'small', value: 8}
];

It would be very useful if we could group by the different properties and then sum the values to get the sum of the different groups.

Basically, what we want, is to be able to get the following:

[ { thing: 'ball', value: 31 },
  { thing: 'bat', value: 74 },
  { thing: 'helmet', value: 73 } ]

There are many snippets on how to reduce data and group by one property, but I want to show you how to do it with multiple properties.

The following function gives you the ability to group an array by multiple properties:

function GroupBy(array, keys, variable) {
    var i, key, temp, split;
    var data = array.reduce((result,currentValue) => {
        key = "";
        for(i = 0; i < keys.length; i++) {
            key = key + currentValue[keys[i]] + "_";
        }
        if(!result[key]) {
            result[key] = 0;
        }
        result[key] += parseFloat(currentValue[variable]);
        return result;
    }, {});
    var grouped = [];
    Object.keys(data).forEach(function(key) {
        temp = {};
        split = key.split("_");
        for(i=0; i < split.length - 1; i++) {
            temp[keys[i]] = split[i]
        }
        temp[variable] = data[key];
        grouped.push(temp);
    });
    return grouped;
}

Below, you can see how running the function with different inputs will give us the desired group sums.

// GroupBy(array,[],"value"):

[ { value: 178 } ]

// GroupBy(array,["thing"],"value")
[ { thing: 'ball', value: 31 },
  { thing: 'bat', value: 74 },
  { thing: 'helmet', value: 73 } ]

// GroupBy(array,["thing","color"],"value"):

[ { thing: 'ball', color: 'red', value: 23 },
  { thing: 'bat', color: 'blue', value: 29 },
  { thing: 'bat', color: 'red', value: 45 },
  { thing: 'helmet', color: 'blue', value: 60 },
  { thing: 'helmet', color: 'red', value: 13 },
  { thing: 'ball', color: 'blue', value: 8 } ]

// GroupBy(array,["thing","color","size"],"value"):
[ { thing: 'ball', color: 'red', size: 'big', value: 10 },
  { thing: 'bat', color: 'blue', size: 'small', value: 15 },
  { thing: 'bat', color: 'red', size: 'small', value: 32 },
  { thing: 'bat', color: 'red', size: 'big', value: 13 },
  { thing: 'helmet', color: 'blue', size: 'medium', value: 30 },
  { thing: 'helmet', color: 'red', size: 'medium', value: 13 },
  { thing: 'helmet', color: 'blue', size: 'big', value: 30 },
  { thing: 'bat', color: 'blue', size: 'medium', value: 14 },
  { thing: 'ball', color: 'red', size: 'medium', value: 13 },
  { thing: 'ball', color: 'blue', size: 'small', value: 8 }]

// GroupBy(array,["size","color","thing"],"value"):

[ { size: 'big', color: 'red', thing: 'ball', value: 10 },
  { size: 'small', color: 'blue', thing: 'bat', value: 15 },
  { size: 'small', color: 'red', thing: 'bat', value: 32 },
  { size: 'big', color: 'red', thing: 'bat', value: 13 },
  { size: 'medium', color: 'blue', thing: 'helmet', value: 30 },
  { size: 'medium', color: 'red', thing: 'helmet', value: 13 },
  { size: 'big', color: 'blue', thing: 'helmet', value: 30 },
  { size: 'medium', color: 'blue', thing: 'bat', value: 14 },
  { size: 'medium', color: 'red', thing: 'ball', value: 13 },
  { size: 'small', color: 'blue', thing: 'ball', value: 8 }]

If you need a different aggregation, you would change the following line:

result[key] += parseFloat(currentValue[variable]);

For example, if you wanted to find the count of each object, you would replace it with:

result[key] += 1;

Finding the minimum and maximum are easy as well, but you have to be careful with how you initialize the property.

Hopefully this article has been useful for you to learn how to aggregate a JavaScript array of objects.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Rotate an Image
  • 2.  JavaScript cos – Find Cosine of Number in Radians Using Math.cos()
  • 3.  Add Years to a Date Using JavaScript
  • 4.  How to Change an Image on Hover Using JavaScript
  • 5.  Find Common Elements in Two Arrays Using JavaScript
  • 6.  JavaScript indexOf – Get the position of a value within a string
  • 7.  Convert an Array of Values into a String Without Commas in JavaScript
  • 8.  Using JavaScript to Get Date Format in yyyy mm dd
  • 9.  How to Use JavaScript to Round Up Numbers
  • 10.  Using JavaScript to Check if Variable is a String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Comments

  1. Mao says

    April 9, 2022 at 11:17 am

    Hello,

    Thank you for your hard working.
    So, I that the following code need to be update for correction.

    Before:

    temp[variable] = array[key];

    After

    temp[variable] = data[key];

    —–

    Reply
    • Erik says

      April 9, 2022 at 6:24 pm

      Yes, you are right, thank you.

      Reply
  2. Rudy says

    October 19, 2022 at 9:48 pm

    How do you group if the property you are wanting to group by is nested like so? I want to group my vendor id first then those grouped by vendor need to be grouped by category name.

    [
    {id: ‘cl93pfpgi21004uwudny1nu31s’, quantity: ‘213.00’, product: {
    category: {
    name: “flower”
    }},
    vendor: {
    id: “8dsjdus98ew8”,
    name: “Amazon”
    }
    }}
    {id: ‘cl981dgur17145ioudevs3lc0a’, quantity: ‘9.76’, product: {
    category: {
    name: “flower”
    }},
    vendor: {
    id: “auisd94j323jk”,
    name: “Big Ben”
    }
    }}
    {id: ‘cl981ptxc22223ioudj3m9iwda’, quantity: ‘3.67’, product: {
    category: {
    name: “concentrate”
    },
    vendor: {
    id: “2mdufs78s8d”,
    name: “Big Ben”
    }
    }}
    ]

    Reply
    • Erik says

      October 20, 2022 at 7:31 am

      Without having to modify the function in the article, you could “flatten” your structure and create variables like “product_category_name”, “vendor_id” and “vendor_name”. Then after this preprocessing step, you could group by those variables and then get the result back into the original structure.

      Otherwise, something like this could work.

      function GroupBy(array) {
          var key, temp, split;
          var data = array.reduce((result,currentValue) => {
              key = "";
              key = key + currentValue["vendor"]["id"] + "_";
              key = key + currentValue["product"]["category"]["name"];
              if(!result[key]) {
                  result[key] = 0;
              }
              result[key] += parseFloat(currentValue["quantity"]);
              return result;
          }, {});
          var grouped = [];
          Object.keys(data).forEach(function(key) {
              temp = {};
              split = key.split("_");
              temp["vendor_id"] = split[0]
              temp["product_category_name"] = split[1]
              temp["quantity"] = data[key];
              grouped.push(temp);
          });
          return grouped;
      }
      
      var products = [{"id":"1","quantity":11,"product":{"category":{"name":"flower"}},"vendor":{"id":"8dsjdus98ew8","name":"Amazon"}},
                      {"id":"2","quantity":22,"product":{"category":{"name":"concentrate"}},"vendor":{"id":"8dsjdus98ew8","name":"Amazon"}},
                      {"id":"3","quantity":33,"product":{"category":{"name":"flower"}},"vendor":{"id":"auisd94j323jk","name":"Big Ben"}},
                      {"id":"4","quantity":44,"product":{"category":{"name":"concentrate"}},"vendor":{"id":"auisd94j323jk","name":"Big Ben"}},
                      {"id":"5","quantity":55,"product":{"category":{"name":"concentrate"}},"vendor":{"id":"auisd94j323jk","name":"Big Ben"}}]
      
      console.log(GroupBy(products))
      
      // Output:
      [
          {
              "vendor_id": "8dsjdus98ew8",
              "product_category_name": "flower",
              "quantity": 11
          },
          {
              "vendor_id": "8dsjdus98ew8",
              "product_category_name": "concentrate",
              "quantity": 22
          },
          {
              "vendor_id": "auisd94j323jk",
              "product_category_name": "flower",
              "quantity": 33
          },
          {
              "vendor_id": "auisd94j323jk",
              "product_category_name": "concentrate",
              "quantity": 99
          }
      ]
      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy