Question

我正在使用Angular ng-repeat with nested json objects?提供的过滤器来运行我的JSON。但是，我不需要访问第二级别，而是访问所有第三级元素。

我的JSON看起来像：

[
{
    "category": "colors",
    "heading": "Colors & Background",
    "indexes": [
        {
            "index": "colors",
            "name": "Colors",
            "patterns": [
                {
                    "index": "background-patterns",
                    "name": "Background Patterns"
                }
            ]
        }
    ], 
    "order": "1"
},
{
    "category": "typography",
    "heading": "Typography",
    "indexes": [
        {
            "index": "typography",
            "name": "Typography",
            "patterns": [
                {
                    "index": "headings",
                    "name": "Headings"
                },
                {
                    "index": "plain-text",
                    "name": "Plain Text"
                },
                {
                    "index": "text-icon",
                    "name": "Text Icon"
                }
            ]
        }
    ], 
    "order": "2"
}
]

我的app.js看起来像：

var app = angular.module('mymod', []);

app.filter('createarray', function () {
    return function (value, propertyName) {
        var arrayList = [];
        angular.forEach(value, function (val) {
            angular.forEach(val[propertyName], function (v) {
                arrayList.push(v)
            });
        });
        console.log(arrayList)
        return arrayList;
    }
});

app.directive('everything', function() {
    return {
        restrict: 'E',
        templateUrl: 'everything.html',
        controller: function($scope, $http) {
            $http.get('assets/js/test.json')
                .then(function(result) {
                    $scope.everything = result.data;
                });
        },
        controllerAs: 'everything'
    }
});

我的HTML看起来像：

<nav class="om-nav-everything">
    <ul>
        <li ng-repeat="pattern in everything.indexes | createarray: 'patterns'"><a href="index-{{pattern.index}}.html">{{pattern.name}}</a></li>
    </ul>
</nav>

我想要做的是为每个模式都有一个列表项，所以列出了JSON中的所有第3级项目。

如何更改过滤器以实现此目的？

这是一个带有相关代码的Plunker：http://plnkr.co/edit/qY4yoBsGTjl9HsreivAN?p=info

Answer 1

所以我所做的就是制作一个可以放入过滤器的功能，因为如果我完成所有工作会有什么乐趣？这将获取一系列属性名称，当它到达最后一个时，它将返回该值。这是一个展示http://plnkr.co/edit/K6SJ8wo9q14YXvChxHuP?p=preview

的傻瓜

var lastArray = function (arr, propertyNames, index) {
  var res = [];
  if (!Array.isArray(arr)) {
    return res;
  }
  for (var i = 0; i < arr.length; i++) {
    var val = arr[i][propertyNames[index]];
    if (index !== propertyNames.length - 1) {
        var x = index + 1;
        res = res.concat(lastArray(val, propertyNames, x));
    } else {
        res = res.concat(val);
    }
  }
  return res;
};

对于一些方向，我可能会尝试类似的事情：

<li ng-repeat="o in everything | createarray: 'indexes,patterns'"></li>

然后在createarray过滤器中将字符串拆分为'，'并将其发送到lastArray()

编辑：我确实创建了一个用角度来演示它的plunker。 http://plnkr.co/edit/RsrIAz1Z3i0XFRV4Cj1g?p=preview

使用Angular ng-repeat访问第3级JSON

1 个答案: