访问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屋!