AngularJS获取JSON数组中特定项目的长度答案

【问题标题】：AngularJS get length of specific item in JSON arrayAngularJS获取JSON数组中特定项目的长度
【发布时间】：2015-09-07 16:51:59
【问题描述】：

嘿，我有一个从服务调用的 JSON 数组。我有一些计数器，我想打印出总数组的长度和一些子项的长度。我能够打印出数组的全长，但我也想打印出进度为“绿色”、“红色”和“黄色”的项目总数。看到它是一个对象数组，我将如何获得绿色，红色，黄色的长度？

JSON：

[
   {
     name: User1,
     progress: "green"
   },
   {
     name: User2,
     progress: "yellow"
   },
   {
     name: User3,
     progress: "green"
   },
    {
     name: User4,
     progress: "red"
   },
]

我正在存储这样调用的服务：

$scope.requestDetails = [];
$scope.requestDetails = data;

HTML：

<div class="total">{{requestDetails.length}}</div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

出于好奇，我尝试打印{{requestDetails.progress.length}}，但它为空，打印{{requestDetails[0].progress.length}} 会打印出第一个对象的进度值的字母数。

【问题讨论】：

看看使用数组过滤方法，你可以用它来创建一个只有你想要的进度值的新数组，然后询问它的长度。 developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

标签： javascript arrays json angularjs

【解决方案1】：

使用内置的角度过滤器：

{{requestDetails.lenght}}

{{(requestDetails | filter: {progress: 'red'}).length}}

您还可以在控制器上使用自定义函数进行自定义逻辑：

控制器代码：

  $scope.colorFilter = function(color) {
    return function (obj) {
      return obj.progress === color;
    };
  };

{{(requestDetails | filter: colorFilter('red')).length}}

注意：由于 Angular 1.3 过滤器必须显式声明它们的依赖关系以在它们上创建一个$watcher，否则这些参数将不会在$digest 循环内进行脏检查，并且输出不会受到任何 2-way绑定。

Plunker： http://plnkr.co/edit/zgzSqeMVnCQbpDitrSI3?p=preview

【讨论】：

不错！但不幸的是，这吐出了达到的 10 个 $digest() 迭代......我仍在深入研究它
如果你能详细说明这个数组是如何被填充和\或改变的，也许我可以提供一些进一步的帮助
当然！我在表格元素上使用 ng-repeat 循环遍历这个数组...我在表格顶部有 3 个计数器，可以显示总数、绿色、红色和黄色记录的数量...我认为使用此过滤器再加上 ng-repeat 吐出摘要错误
嘿奥列格，它现在已修复！在我调用我的服务并存储上述数据的控制器中，我有两个相同的“GET”调用实例来获取我的数据...我删除了重复项并像魅力一样工作...谢谢

【解决方案2】：

您可以在控制器中准备数据，计算每个元素：

$scope.itemData = {};
for (var i = 0; i < $scope.requestDetails.length; ++i) {
  var detail = $scope.requestDetails[i];
  if ($scope.itemData[detail.progress] === undefined) {
    $scope.itemData[detail.progress] = 0;
  }
  $scope.itemData[detail.progress]++;
}

并在您的模板中使用它：

<div class="red">{{ itemData.red }}</div>
<div class="green">{{ itemData.green }}</div>

【讨论】：

【解决方案3】：

如果我正确理解问题，目标是显示对象中每种进度类型的计数？

如果是这种情况，这是一种可能的解决方案。

HTML

<div>{{requestDetails.length}}</div>
<div class="red">{{(requestDetails | filter: {progress: 'red'}).length}}</div>
<div class="green">{{(requestDetails | filter: {progress: 'green'}).length}}</div>

此方法利用内置的角度过滤器。有关过滤器和 angularjs 的更多阅读，这里是 docs.

【讨论】：