Group by in javascript or angularjs

Question

I just want to do sum value column based on the Year and my data is below, but I don't know how to do this either using angular(in script) or javascript.

[
    {"Year":2013,"Product":"A","Value":0},
    {"Year":2013,"Product":"B","Value":20},
    {"Year":2013,"Product":"A","Value":50},
    {"Year":2014,"Product":"D","Value":55},
    {"Year":2014,"Product":"M","Value":23},
    {"Year":2015,"Product":"D","Value":73},
    {"Year":2015,"Product":"A","Value":52},
    {"Year":2016,"Product":"B","Value":65},
    {"Year":2016,"Product":"A","Value":88}
]

I want to perform the sum on Value column and remove Product column as well. Thanks

Ted Yavuzkurt · Accepted Answer · 2016-11-16 20:27:29Z

1

Edit As commenters have pointed out, this doesn't even require Lodash. Been using Lodash so much for current project I forgot reduce is built in. :-)

Also updated to put data in desired form [{"yyyy" : xxxx},...].

This code will accomplish this:

var data = [{"Year":2013,"Product":"A","Value":0},{"Year":2013,"Product":"B","Value":20},{"Year":2013,"Product":"A","Value":50},{"Year":2014,"Product":"D","Value":55},{"Year":2014,"Product":"M","Value":23},{"Year":2015,"Product":"D","Value":73},{"Year":2015,"Product":"A","Value":52},{"Year":2016,"Product":"B","Value":65},{"Year":2016,"Product":"A","Value":88}];

var sum = data.reduce(function(res, product){

    if(!(product.Year in res)){
        res[product.Year] = product.Value;
    }else{
        res[product.Year] += product.Value;
    }

    return res;
}, {});

result = [];

for(year in sum){
    var tmp = {};
    tmp[year] = sum[year];
    result.push(tmp);
}

console.log(result);

RESULT:

[{"2013" : 70}, {"2014" : 78}, {"2015" : 125}, {"2016" : 153}]

ORIGINAL ANSWER

The easiest way I can think of to do this is with the Lodash Library. It gives you some nice functional programming abilities like reduce, which basically applies a function to each element of an array or collection one by one and accumulates the result.

In this case, if you use Lodash, you can accomplish this as follows:

var data = [{"Year":2013,"Product":"A","Value":0},{"Year":2013,"Product":"B","Value":20},{"Year":2013,"Product":"A","Value":50},{"Year":2014,"Product":"D","Value":55},{"Year":2014,"Product":"M","Value":23},{"Year":2015,"Product":"D","Value":73},{"Year":2015,"Product":"A","Value":52},{"Year":2016,"Product":"B","Value":65},{"Year":2016,"Product":"A","Value":88}];

result = _.reduce(data, function(res, product){

    if(!(product.Year in res)){
        res[product.Year] = product.Value;
    }else{
        res[product.Year] += product.Value;
    }

    return res;
}, {});

This yields:

{
   "2013": 70,
   "2014": 78,
   "2015": 125,
   "2016": 153
}

Basically, what we're telling Lodash is that we want to go through all the elements in data one by one, performing some operation on each of them. We're going to save the results of this operation in a variable called res. Initially, res is just an empty object because we haven't done anything. As Lodash looks at each element, it checks if that Product's year is in res. If it is, we just add the Value to that year in res. If it's not, we set that Year in res to the Value of the current product. This way we add up all the product values for each year.

If you want to try it out you can do it here: Online Lodash Tester

Cheers!

edited Nov 16, 2016 at 20:27

answered Nov 16, 2016 at 20:13

Ted Yavuzkurt

5274 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tomek Sułkowski Over a year ago

You can also do this without lodash since reduce is a method available on the array.

Khan Over a year ago

This is what I want [ { "2013": 70}, {"2014": 78}, {"2015": 125}, {"2016": 153} ]

Ted Yavuzkurt Over a year ago

@TomekSułkowski you're right. Been using Lodash so much on current project started to forget which functions are built in and which are not.

Ted Yavuzkurt Over a year ago

@JeelaniKhan added code to do that. Not super elegant, perhaps someone can find better way to transform it into that.

Khan Over a year ago

Can we continue the above and expand the solution to the google trend chart.

|

Christos · Accepted Answer · 2016-11-16 20:20:03Z

0

You could do this using plain JavaScript. We use an object that will hold the results and the forEach array method. The object that would hold the results would have as keys the years and as values the sums of the corresponding values.

var data = [
    {"Year":2013,"Product":"A","Value":0},
    {"Year":2013,"Product":"B","Value":20},
    {"Year":2013,"Product":"A","Value":50},
    {"Year":2014,"Product":"D","Value":55},
    {"Year":2014,"Product":"M","Value":23},
    {"Year":2015,"Product":"D","Value":73},
    {"Year":2015,"Product":"A","Value":52},
    {"Year":2016,"Product":"B","Value":65},
    {"Year":2016,"Product":"A","Value":88}
];

groupedData = {};

data.forEach(function(item){
    var year = item.Year;
    var value = item.Value;
    if(groupedData.hasOwnProperty(year)){
      groupedData[year]+=value;
    }else{
      groupedData[year]=value;
    }
});

console.log(groupedData);

answered Nov 16, 2016 at 20:20

Christos

54.1k9 gold badges82 silver badges114 bronze badges

5 Comments

Khan Over a year ago

can we get the result in array of object instead.

Ted Yavuzkurt Over a year ago

Updated my answer below to do this.

Khan Over a year ago

Yes, actually I am preparing this for the google trend chart and need only year and value with aggregated data based on year.

Khan Over a year ago

Can I ask for the working fidler or something similar

Khan Over a year ago

Can we change the top most code to get the result in [["2013", 70], ["2014" ,78], ["2015" , 125]]

Collectives™ on Stack Overflow

Group by in javascript or angularjs

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related