JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="results"></div>
JavaScript
var dataString='[{ "category" : "Search Engines", "hits" : 5, "bytes" : 50189 },{ "category" : "Content Server", "hits" : 1, "bytes" : 17308 },{ "category" : "Content Server", "hits" : 1, "bytes" : 47412 },{ "category" : "Search Engines", "hits" : 1, "bytes" : 7601 },{ "category" : "Business", "hits" : 1, "bytes" : 2847 },{ "category" : "Content Server", "hits" : 1, "bytes" : 24210 },{ "category" : "Internet Services", "hits" : 1, "bytes" : 3690 },{ "category" : "Search Engines", "hits" : 6, "bytes" : 613036 },{ "category" : "Search Engines", "hits" : 1, "bytes" : 2858 }]';
var objects = $.parseJSON(dataString);
var categories = new Array();
var groupedObjects = new Array();
var i = 0;
_.each(objects,function(obj){
var existingObj;
if($.inArray(obj.category,categories) >= 0) {
existingObj = _.find(objects,function(o){return o.category === obj.category; });
existingObj.hits += obj.hits;
existingObj.bytes += obj.bytes;
} else {
groupedObjects[i] = obj;
categories[i] = obj.category;
i++;
}
});
groupedObjects = _.sortBy(groupedObjects,function(obj){ return obj.bytes; }).reverse();
// print results for testing
_.each(groupedObjects,function(obj){
var output = '';
_.each(obj,function(val,key){
output += key+': '+val+'<br>';
});
output += '<br>';
$('#results').append(output);
});