Jeelani Khan Jeelani Khan - 18 days ago 5
AngularJS Question

Group by in javascript or angularjs

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

Answer

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!

Comments