访问JSON的第三级与角纳克重复 [英] Accessing 3rd level of JSON with Angular ng-repeat
问题描述
我用在<所提供的过滤器href=\"http://stackoverflow.com/questions/28282419/angular-ng-repeat-with-nested-json-objects/33636779#33636779\">Angular嵌套JSON对象NG-重复？的通过我的JSON运行。然而，而不是访问的第二级在那里的例子中，我需要访问所有的第三级的元素。
我的JSON是这样的：
[
{
类别：颜色，
标题：颜色和放大器;背景，
指标：
{
指数：颜色，
名：颜色，
模式：
{
指数：背景图案
名：背景图案
}
]
}
]
序：1
}，
{
类别：排版
标题：印刷术，
指标：
{
指数：排版
名：印刷术，
模式：
{
指数：标题，
名：标题
}，
{
指数：纯文本，
名：纯文本
}，
{
指数：文字图标
名：文本图标
}
]
}
]
序：2
}
]
我的app.js如下：
VAR应用= angular.module（'mymod'，[]）;app.filter（'createarray'，函数（）{
返回功能（值，propertyName的）{
VAR的ArrayList = [];
angular.forEach（值，函数（VAL）{
angular.forEach（VAL [propertyName的]功能（五）{
arrayList.push（ⅴ）
}）;
}）;
的console.log（数组列表）
返回数组列表;
}
}）;app.directive（'一切'，函数（）{
返回{
限制：'E'，
templateUrl：everything.html'，
控制器：函数（$范围，$ HTTP）{
$ http.get（资产/ JS / test.json'）
。然后（功能（结果）{
$ scope.everything = result.data;
}）;
}，
controllerAs：'一切'
}
}）;
和我的HTML如下：
＆LT;导航类=OM-NAV-一切＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=格局everything.indexes | createarray：'模式'＆GT;＆LT; A HREF =指数 - {{pattern.index}} HTML＆GT; {{pattern.name}}＆LT ; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / NAV＆GT;
我想要做的是对每一个模式的列表项，所以从JSON所有三级项目列表。
我将如何改变过滤器来做到这一点？
下面是相关code一Plunker： http://plnkr.co/编辑/ qY4yoBsGTjl9HsreivAN p =信息
所以我做了什么由你可以放入过滤器的功能，因为什么，如果我做所有的工作的乐趣？这将需要的属性名称的数组，当它到达最后一个，它会返回一个值。这里是一个plunker证明 http://plnkr.co/edit/K6SJ8wo9q14YXvChxHuP?p= preVIEW
VAR lastArray =功能（ARR，propertyNames，指数）{
VAR解析度= [];
如果（！Array.isArray（ARR））{
返回水库;
}
对于（VAR I = 0; I＆LT; arr.length;我++）{
VAR VAL =改编[I] [propertyNames [指数]];
如果（！索引== propertyNames.length - 1）{
VAR X =指数+ 1;
RES = res.concat（lastArray（VAL，propertyNames，X））;
}其他{
RES = res.concat（VAL）;
}
}
返回水库;
};
有关有点方向我可能会尝试这样的：
＆LT;李NG重复=o在一切| createarray：索引模式'＆GT;＆LT; /李＆GT;
然后在 createarray 过滤器分裂的'，'和发送到 lastArray（） <字符串/ p>
编辑：我没有创建一个plunker与角度进行论证。 http://plnkr.co/edit/RsrIAz1Z3i0XFRV4Cj1g?p=$p$pview
I'm using the filter supplied at Angular ng-repeat with nested json objects? to run through my JSON. However, instead of accessing the 2nd level as in the example there, I need to access all of the 3rd level elements.
My JSON looks like:
[
{
"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"
}
]
My app.js looks like:
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'
}
});
And my HTML looks like:
<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>
What I want to do is have a list item for every pattern, so a list of all 3rd level items from the JSON.
How would I alter the filter to make this happen?
Here is a Plunker with the relevant code: http://plnkr.co/edit/qY4yoBsGTjl9HsreivAN?p=info
So what I've done is made a function that you can put into the filter, because what's the fun if I do all the work? This will take an array of property names and when it gets to the last one it'll return that value. Here is a plunker to demonstrate 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;
};
For a bit of direction I would probably try something like:
<li ng-repeat="o in everything | createarray: 'indexes,patterns'"></li>
Then in the createarray filter split the string on the ',' and send that into lastArray()
Edit: And I did create a plunker to demonstrate it with angular. http://plnkr.co/edit/RsrIAz1Z3i0XFRV4Cj1g?p=preview
这篇关于访问JSON的第三级与角纳克重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
