迭代json数组字段答案

【问题标题】：iterate json array field迭代json数组字段
【发布时间】：2016-07-28 23:14:04
【问题描述】：

我在用复选框过滤 javascript 中 JSON 对象/字符串中的数组字段时遇到问题。

这是我的 HTML：

<div ng-app="fruit">
    <div ng-controller="FruitCtrl">

        <input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
        <input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
        <input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>

        <ul>
            <li ng-repeat="f in fruit | filter:colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{colourIncludes}}
    </div>
</div>

这是我的数据：

 $scope.fruit = [
        {'name': 'Apple', 'colour': ['Red']},
        {'name': 'Orange', 'colour': ['Red','Orange']},
        {'name': 'Banana', 'colour': ['Yellow','Orange']}];

最初的 jsfiddle 是基于单个项目的颜色字段，而不是颜色数组。

original:
{'name':'Apple','colour':'Red'}

my version:
{'name':'Apple','colour':['Red','Yellow']}

这就是它被过滤的方式：

$scope.colourFilter = function(fruit) {
    if ($scope.colourIncludes.length > 0) {
    var data = fruit.colour;
        if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
            return;
    }

    return fruit;
}

我正在尝试像这样过滤：

$scope.colourFilter = function(fruit) {
if ($scope.colourIncludes.length > 0) {
var data = fruit.colour;
for(var i in data){
    if ($.inArray(data[i], $scope.colourIncludes) < 0)
      return;
    }

    return fruit;
}

关于为什么我找不到匹配项的任何想法？我想我没有正确扫描数组？

【问题讨论】：

其实问题出在你的数据变量上。
所以我的数据数组结构不正确？我猜关于颜色数组的定义？
看我的回答。

标签： angularjs json

【解决方案1】：

for (var i in fruit){
    fruit[i].colour.forEach(function(color){
        console.log(color); 
    });
}

此循环将颜色数组中的项目一一返回。

基本上，fruit.color 是未定义的，因为您没有指定要引用数组中的哪个索引。

换句话说，fruit[0].colour、fruit[1].colour ...等都是有效的。

【讨论】：

angular.forEach() 将是遍历对象的更好方法。

【解决方案2】：

你的代码不太适合我，但这至少让我可以打印每个水果的颜色：

$scope.colourFilter = function(f) {

        angular.forEach(f.colour, function(color){
        console.log("Color is: "+color);


    });

}

【讨论】：