计算出现次数和递增值

Question

我有一个带有一些数据的 JSON 文件，例如：

  $scope.expenses = [
    {
      "amount": "100",
      "SpentOn": "19/04/2014",
      "IsExpensable": true,
    },
    {
      "amount": "200",
      "SpentOn": "20/04/2014",
      "IsExpensable": true,
    },
    {
      "amount": "50",
      "SpentOn": "01/01/2014",
      "IsExpensable": true,
    },
    {
      "amount": "350",
      "SpentOn": "01/09/2013",
      "IsExpensable": false,
    }
  ];

我正在尝试编写一个循环遍历上述内容的角度函数，当 IsExpensable=true 时，然后对 mm 和 yyyy 进行计数以确定该月发生了多少费用。所以在上面的例子中，2014 年 4 月有 2 个。2010 年 1 月有 1 个。

这是我的 JS：

$scope.MyDateFilterFunction = function () {

      var data = [];
      var dataMonth = [];
      var dataYear = [];
      var Jan = 0;
      var Feb = 0;
      var Mar = 0;
      var Apr = 0;
      var May = 0;
      var May = 0;
      var Jun = 0;
      var Jul = 0;
      var Aug = 0;
      var Sep = 0;
      var Oct = 0;
      var Nov = 0;
      var Dec = 0;

      angular.forEach($scope.expenses, function (value, key) {             

          if (value.IsExpensable) {

              angular.forEach($scope.expenses, function (value, key) {

                data = value.SpentOn.split('/');

                dataMonth = data[1];
                dataYear = data[2];

                var count = (dataMonth.split("04").length - 1)

                console.log("April occurances" + count.length);

                // Add count to var Apr

              });
          }              

      });

      return data;         

  };

我的 HTML：

<td ng-repeat="exp in MyDateFilterFunction ()">
    {[{exp}]}
</td>

---

更新：

已添加：

if (dataMonth == "04") {

       Apr = Apr + 1;
       console.log(Apr);
}

但是控制台输出是： 1 2 3 4 1 2 3 4 1 2 3 4

---

通过删除第二条angular.forEach 语句解决

Answer 1

来自 Mike 的（基于下划线的）回答：
“想象一下在您自己的代码中编写解决方案” - 接受挑战！

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

$scope.groupped = $scope.expenses
    /* Only give me expensable items */
    .filter(function (exp) {
        return exp.IsExpensable;
    })
    /* Determine each item's group (with friendly display name) */
    .map(function (exp) {
        var dateArr = exp.SpentOn.split('/');
        var groupValue = '' + months[parseInt(dateArr[1]) - 1] + 
                         ' ' + dateArr[2];
        return groupValue;
    })
    /* Map group-names to items-count */
    .reduce(function (groupped, groupValue) {
        groupped[groupValue] = (groupped[groupValue] || 0) + 1;
        return groupped;
    }, {});

<div ng-repeat="(time, count) in groupped">
    {{time}}: {{count}}
</div>

如果（无论出于何种原因）您更喜欢使用数组而不是对象：

$scope.groupped = ...;
$scope.grouppedArr = Object.keys($scope.groupped).map(function (key) {
    return {name: key, count: $scope.groupped[key]};
});

<div ng-repeat="group in grouppedArr">
    {{group.name}}: {{group.count}}
</div>

---

也请看这个short demo

---

_{注 1：
在这两种情况下（vanilla JS，下划线）都需要额外的逻辑来按月份索引对结果进行排序。}

_{注2：
如果您计划支持旧版本的浏览器（是的，我的意思是像 IE}

Answer 2

我知道您对使用 Underscore 持怀疑态度，但我认为它对于任何应用程序几乎都是必不可少的。使用该库时，请考虑以下问题的答案：

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

$scope.data = _.chain($scope.expenses)
  // Only give me expensable items
  .filter(function(exp) {
    return exp.IsExpensable;
  })
  // group them by the month and year (with friendly display string)
  .groupBy(function(exp) {
    var dateAr = exp.SpentOn.split('/');
    var groupValue = '' + months[parseInt(dateAr[1])] + ' ' + dateAr[2];
    return groupValue;
  })
  // Map to a list of objects with time (friendly display string) and number of transactions
  .map(function(group, key) {
    return {
      time: key,
      transactions: group.length
    };
  })
  // End the chain
  .value();

然后在你的 html 中：

<div ng-repeat="item in data">
  {{item.time}}: {{item.transactions}}
</div>

下划线可以让您的生活更轻松，这真是令人难以置信。我保证你会在你的应用程序中不止一个地方使用它。它也非常轻量级（5kB 压缩和 gzip 压缩）。想象一下，在您自己的代码中编写一个解决方案，同时使其可移植到您应用程序的其他部分。