JavaScript sum multidimensional array element values

Question

I have the following array and I need to calculate the sum of the values per group. I can get the sum for each group for the first value at dataArr[1] of the array, but I need to also get the sum for the second value at dataArr[2] for each group in the array.

var dataArr = [    [
    "Group One",
    1,
    1
],
[
    "Group Four",
    0,
    1
],
[
    "Group Three",
    0,
    1
],
[
    "Group Three",
    1,
    0
],
[
    "Group Four",
    0,
    1
],
[
    "Group Two",
    2,
    1
],
[
    "Group Four",
    1,
    0
],
[
    "Group Three",
    0,
    1
],
[
    "Group Three",
    0,
    1
],
[
    "Group One",
    1,
    0
],
[
    "Group Three",
    0,
    1
],
[
    "Group Two",
    1,
    0
]
];

How to calculate the sum of the second value and generate a multidimensional array like the following:

[["Group One", 2, 1], ["Group Four", 1, 2], ["Group Three", 1, 4], ["Group Two", 3, 1]]

Below is my code inspired from here:

var result = [];

$(dataArr).each(function() {
    var key = this[0];
    var value = this[1];

    if (result[key]) {
        result[key] += value;       
    } else {
        result[key] = value;
    }
});

Answer 1

This proposal uses a temporary object for the reference to the result array.

var dataArr = [["Group One", 1, 1], ["Group Four", 0, 1], ["Group Three", 0, 1], ["Group Three", 1, 0], ["Group Four", 0, 1], ["Group Two", 2, 1], ["Group Four", 1, 0], ["Group Three", 0, 1], ["Group Three", 0, 1], ["Group One", 1, 0], ["Group Three", 0, 1], ["Group Two", 1, 0]],
    result = function (data) {
        var r = [], o = {};
        data.forEach(function (a) {
            if (!o[a[0]]) {
                o[a[0]] = [a[0], 0, 0];
                r.push(o[a[0]]);
            }
            o[a[0]][1] += a[1];
            o[a[0]][2] += a[2];
        });
        return r;
    }(dataArr);
    
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Answer 2

Solution with Array.forEach, Object.keys and Array.map methods:

var keys_obj = {}, key;
dataArr.forEach(function(v){
    key = v[0];
    if (! (key in keys_obj) ) {
        keys_obj[key] = [v[1], v[2]];
    } else {
        keys_obj[key][0] += v[1];
        keys_obj[key][1] += v[2];
    }
});

var result = [];
result = Object.keys(keys_obj).map(function(v){
    return [v, keys_obj[v][0], keys_obj[v][1]];
});

console.log(result);

// the output: 
[["Group Four", 1, 2], ["Group Three", 1, 4], ["Group One", 2, 1], ["Group Two", 3, 1]]

Answer 3

With map and reduce methods:

var reduced = dataArr.reduce(function(obj,item) {
  if(obj.hasOwnProperty(item[0])) {
    obj[item[0]][0] += item[1]
    obj[item[0]][1] += item[2]
  } else {
    obj[item[0]] = []
    obj[item[0]][0] = item[1]
    obj[item[0]][1] = item[2]
  }
  return obj;
}, {});
var grouped = Object.keys(reduced).map(function(item) {
  return [item, reduced [item][0], reduced [item][1]]
});

Answer 4

1. Use an object instead of an array to track custom properties.
2. Instead of a single value per key, use an array per key. Now you can support, 1, 2, or 47 values per object.
3. In case you have more than 2 values in the future, I suggest using a for loop to generically handle them all.

var dataArr = [["Group One",1,1],["Group Four",0,1],["Group Three",0,1],
               ["Group Three",1,0],["Group Four",0,1],["Group Two",2,1],
               ["Group Four",1,0],["Group Three",0,1],["Group Three",0,1],
               ["Group One",1,0],["Group Three",0,1],["Group Two",1,0]];

var sumByKey = {};
dataArr.forEach(function(item){
  var key = item[0];
  if (!sumByKey[key]) sumByKey[key] = [];
  for (var i=0;i<2;++i){
    sumByKey[key][i] = (sumByKey[key][i] || 0) + item[i+1];
  }
});

var output = neatJSON(sumByKey,{wrap:30,short:true,aligned:true});
document.querySelector('pre').innerHTML = output;

<script src="http://phrogz.net/JS/neatjson/neatjson.js"></script>
<pre></pre>

Answer 5

With object and Array.prototype.forEach() method

var o = {};
dataArr.forEach(function(e) {
    var t = o[e[0]];
    if (t) {
        t.first += e[1];
        t.second += e[2];
    } else {
        t = {};
        t.first = e[1];
        t.second = e[2];
        o[e[0]] = t;
    }
});

Usage:

console.log(o["Group Four"].first); // first sum for "Group Four"
console.log(o["Group Four"].second); // second sum for "Group Four"

console.log(o); // all groups with their sums

Answer 6

Yet another approach to this old (and seemingly common) problem by using the Map object and the reduce and map functions.

const dataArr = [
  ['Group One', 1, 1],
  ['Group Four', 0, 1],
  ['Group Three', 0, 1],
  ['Group Three', 1, 0],
  ['Group Four', 0, 1],
  ['Group Two', 2, 1],
  ['Group Four', 1, 0],
  ['Group Three', 0, 1],
  ['Group Three', 0, 1],
  ['Group One', 1, 0],
  ['Group Three', 0, 1],
  ['Group Two', 1, 0],
];

const sumArray = (data) =>
  Array.from(
    data.reduce((accum, item) => {
      let prev = accum.get(item[0]) || [0, 0];
      accum.set(item[0], [prev[0] + item[1], prev[1] + item[2]]);

      return accum;
    }, new Map())
  ).map((entry) => [entry[0], entry[1][0], entry[1][1]]);

console.log(sumArray(dataArr));

A Map instance is used as an accumulator in the reduce, and it stores "tuples" of the sums for each "Group", it is then converted to an array and mapped (no pun inteded) to flatten it into the same [[string, number, number]] shape as the original data.