使用Angular ng repeat访问第三级JSON

Accessing 3rd level of JSON with Angular ng-repeat

本文关键字：第三级 JSON 访问 repeat Angular ng 使用      更新时间：2023-09-26

我正在使用Angular ng repeat提供的过滤器来嵌套json对象？以运行我的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中所有三级项的列表。

我该如何更改过滤器以实现这一点？

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

所以我所做的是制作一个可以放入过滤器的函数，因为如果我做了所有的工作，有什么乐趣？这将采用一个属性名称数组，当它到达最后一个时，它将返回该值。下面是一个演示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

相关文章：