Totalling/merging JavaScript values based on key

Question

I have a JavaScript array which I use jQuery to display values in a table

for (var i = 0; i < data.MyArray.length; i++) {    
  $('#my-table').append('<tr><td>' + data.MyArray[i].DisplayGroup + '</td><td>' + data.MyArray[i].Value + '%<td></tr>');
}

I would like to "group" the values based on DisplayGroup prior to displaying the values

So if my array contains

DisplayGroup: ABC Value: 5
DisplayGroup: DEF Value: 3
DisplayGroup: ABC Value: 6
DisplayGroup: GHI Value: 2

I would like to total the duplicate DisplayGroup entries (in this example ABC) so that I display

ABC 11
DEF 3
GHI 2

Is there a way to iterate through the array and create a new array to then use?

Possible duplicate of [Sum javascript object propertyA values with same object propertyB in array of objects](http://stackoverflow.com/questions/19233283/sum-javascript-object-propertya-values-with-same-object-propertyb-in-array-of-ob) — Sebastian Simon, Sep 21 '16 at 06:49

nem035 · Answer 1 · 2016-10-08T09:55:34.000

Is there a way to iterate through the array and create a new array to then use?

There's no need to create a new array, you can just use array reduction to create an object that contains all the data. The approach you can take is to iterate through the array and build the object by initializing not yet found values and incrementing the already initialized:

var convertedObject = arr.reduce(function(obj, item) {
  var g = item.DisplayGroup;
  var v = item.Value;
  if (typeof obj[g] !== 'number') {
    obj[g] = v;   // initialize value that wasn't found yet
  } else {
    obj[g] += v;  // update the value with the current increment
  }
  return obj;
}, {});

Then you can build the table using a similar loop to the one you have:

$.each(convertedObject, function(key, value) {
  table.append('<tr><td>' + key + '</td><td>' + value + '<td></tr>');
});

Here's a running example:

var arr = [{
  DisplayGroup: 'ABC',
  Value: 5
}, {
  DisplayGroup: 'DEF',
  Value: 3
}, {
  DisplayGroup: 'ABC',
  Value: 6
}, {
  DisplayGroup: 'GHI',
  Value: 2
}];

// reducing into an object
var convertedObject = arr.reduce(function(obj, item) {
  var g = item.DisplayGroup;
  var v = item.Value;
  if (typeof obj[g] !== 'number') {
    obj[g] = v; // initialize value that wasn't found yet
  } else {
    obj[g] += v; // update the value with the current increment
  }
  return obj;
}, {});

var table = $('#table');
$.each(convertedObject, function(key, value) {
  table.append('<tr><td>' + key + '</td><td>' + value + '<td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
</table>

If you need to, this is how you can convert this object into an array:

var convertedArray = Object.keys(convertedObject).map(function(key) {
  var obj = {};
  obj[key] = object[key];
  return obj;
});

score 0 · Answer 2 · answered Sep 21 '16 at 08:17

var array = [{
  DisplayGroup: 'ABC',
  Value: 5
}, {
  DisplayGroup: 'DEF',
  Value: 3
}, {
  DisplayGroup: 'ABC',
  Value: 6
}, {
  DisplayGroup: 'GHI',
  Value: 2
}];


Array.prototype.groupBy = function( key,value){
var newArray = []
var temp = []
this.filter((c,i,a)=> {
    var ob = {}
    if(temp.indexOf(c[key]) == -1){
       ob[c[key]] = c[value] ;
       newArray.push(ob)
       temp.push(c[key]);
      }
  else{
       newArray.filter((e)=> {
          if(e[c[key]]){
            e[c[key]] = e[c[key]] +  c[value]
            }
       });
    }
})
return newArray;
  }


console.log(array.groupBy('DisplayGroup','Value'))

Totalling/merging JavaScript values based on key

2 Answers2