AngularJS：小計和總計

Question

我已將自己編碼到一個角落，並且無法計算出如何計算小計（每種作物）和總計（所有作物）。我現在有硬編碼的預期值，但需要弄清楚如何計算它們。

I have a plunker。

我正在使用budget.json模擬對工廠數據庫的調用（在budget.js中定義）。 BudgetsController也在budget.js中定義。

硬編碼總數從budgets.js的第35行開始。我嘗試了幾種LoDash方法來計算總數，但似乎無法找到我可以爲每種作物複製的模式，並且我知道「總計」總數將遵循相同的模式，但僅使用小計。

任何幫助表示讚賞！

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

讓我們來看看你有什麼：

1. _.groupBy：返回一個對象，它的鍵是作物的名稱;
2. _.map：迭代grped鍵（裁切名稱）並返回一個數組; （）：本地數組方法，通過整個數組積累一些值
   1. current：reduce每次從數組傳遞一個不同的元素;
   2. 前一個：這一個我們是在控制中，它第一次包含第二個參數reduce()的值，這就是爲什麼我傳遞了一個固定的對象。每次迭代都會修改此對象。

更多有關Array.prototype.reduce：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

樣品：

 $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}); 
     });