AngularJS: SubTotals and Totals - angularjs

Question

I have coded myself into a corner and can't figure out how to calculate the subtotals (per crop) and totals (all crops). I have the expected values hard-coded right now but need to figure out how to calculate them.
I have a plunker.
I am using budget.json to simulate the call to the database in the factory (defined in budget.js). The BudgetsController is also defined in budget.js.
The hard-coded totals begin at line 35 of budgets.js. I tried several of the LoDash methods to calculate the totals but can't seem to find the pattern that I can replicate for each crop and I know the Totals total would follow the same pattern but just using the subtotals.
Any help is appreciated!
CODE of budget.js:
(function(){
'use strict';
angular
.module('ARM')
.factory('ExpensesFactory', function ExpensesFactory(
$http, $q
) {
return {
getBudget: getBudget
};
function getBudget(id){
return $http.get('budget.json');
}
})
.controller('BudgetsController', BudgetsController);
BudgetsController.$inject = ['$scope', 'ExpensesFactory'];
function BudgetsController(
$scope, ExpensesFactory
){
ExpensesFactory.getBudget('1')
.then(function success(rsp){
var arr = rsp.data;
var flattened = _.flatten(arr);
var grped = _.groupBy(flattened, function(item) {
return item.crop;
});
$scope.uses = grped;
//TODO: Crop and Loan Budget Totals
$scope.uses.totals = [
//CORN
[
{
"arm": 178,
"dist": 197.91,
"other": 115,
"peracre": 490.91,
"calc_arm": 61837.2,
"calc_dist": 68753.934,
"calc_other": 39951,
"calc_total": 170542.134
}
],
//SOYBEANS
[
{
"arm": 145,
"dist": 69.73,
"other": 74.35,
"peracre": 289.08,
"calc_arm": 84143.5,
"calc_dist": 40464.319,
"calc_other": 43145.305,
"calc_total": 167753.124
}
],
//SORGHUM
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//WHEAT
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//COTTON
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//RICE
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//PEANUTS
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//SUGAR CANE
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 0,
"calc_dist": 0,
"calc_other": 0,
"calc_total": 0
}
],
//TOTALS
[
{
"arm": 0,
"dist": 0,
"other": 0,
"peracre": 0,
"calc_arm": 155999,
"calc_dist": 36530,
"calc_other": 87223,
"calc_total": 279752
}
]
];
var uniqExp = _.uniq(_.pluck(flattened, 'expense'));
$scope.exp = uniqExp;
});
} // end BudgetsController fn
})();

Answer 1

Let's see what you've got:
_.groupBy: returns an object whose keys are crop's names;
_.map: iterates over grped keys (crop names) and returns an array;
item.reduce(): native array method, accumulates some values through the whole array
current: reduces passes a different element from array, each time;
previous: this one we're are in control, the first time it contains the value of the second reduce() parameter, this is why I've passed an fixed object. This object is modified each iteration.
More information about Array.prototype.reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Sample:
$scope.uses = _.map(grped, function (item, key) {
return item.reduce(function (previous, current) {
// in the nth iteration, each previous property will be equal to sum(arr[0].property...arr[n-1].property)
previous.arm += current.arm;
previous.dist += current.dist;
previous.other += current.other;
// other fields should be summed here
// remember to return the accumulator
return previous;
},
/* initialize each property to zero, otherwize it won't work */
{crop: key, arm: 0, dist: 0, other: 0});
});