与大型JSON数组AngularJs [英] AngularJs with large JSON array
问题描述
1OK所以我开发具有使用AngularJs绑定从RESTful Web服务的视图接收到的数据父子层次结构的应用程序。
1Ok so I'm developing an application that has a Parent-Child hierarchy using AngularJs to bind the data received from the RESTFUL web service to the view.
JSON的Web服务将返回会的一个例子：
An example of the JSON the web service would be returning would be:
{"id":0,"name":"Parent One","listOfChildren":[{"id":0,"name":"Child 1","childType":"CHILD1"},{"id":1,"name":"Child 2","childType":"CHILD1"}]}
有了这个信息，我知道我可以把它变成一个数组，并使用Angulars纳克重复表上显示，但我的问题是一个家长可能有数百/千儿童，并有可能是数百/千父母这样数组将是巨大的。
With this information I know I can put it into an array and display it on a table using Angulars ng-repeat but my problem is a Parent could have hundreds/thousands of children and there could be hundreds/thousands parents so the array would be colossal.
另一个问题是，当我更新了新的儿童的父母，我将不得不遍历整个数组，寻找父母，然后将孩子到它这是非常ineffecient。
Another problem is when I update a parent with a new child I would have to traverse the whole array looking for the parent and then insert the child into it which is extremely ineffecient.
所以我的问题基本上是有什么办法可以更有效地做到这一点，而无需使用一个大阵？
So my question is basically is there any way I can do this more efficiently without having to use one big array?
感谢提供任何帮助。
推荐答案
既然你有一个庞大的数据量，我不知道，真的是有一个完美的解决方案。你必须证明每一个家长，并在同一时间每一个孩子？或者，你能分页结果让你只显示在同一时间，也许100个节点？在你的榜样，孩子双方的父母和都为0相同的id属性值是实际的情况？或做你的父母和孩子有独特的ID？您可以访问到后端的Web服务？你可以改变JSON格式它服务了？
Given that you have a huge amount of data, I don't know that there is really a perfect solution. Do you have to show every parent and every child at one time? Or could you paginate the results so that you're only showing maybe 100 nodes at a time? in your example, the parent and both of the children have the same id property value of 0. Is that actually the case? or do your parents and children have unique id's? Do you have access to the backend web service? Can you change the format of the json it serves up?
使一些假设上述问题，这是我能想到的最好的建议：
Making some assumptions to the above questions, here's the best proposal I can think of:
更改您的JSON转换成类似这样的格式：
Change your JSON into a format similar to this one:
var bigobject = {
100: {
"id":100,
"name":"Parent One",
"listOfChildren":{
101: {
"id":101,
"name":"Child 1",
"childType":"CHILD1"
},
102: {
"id":102,
"name":"Child 2",
"childType":"CHILD1"
}
... // more children here
}
},
103: {
"id":103,
"name":"Parent Two",
"listOfChildren":{
104: {
"id":104,
"name":"Child 3",
"childType":"CHILD1"
},
105: {
"id":105,
"name":"Child 4",
"childType":"CHILD1"
}
... // more children here
}
},
... // more parents here
}
基本上，你有一个很大的JSON对象，其中每个节点的关键是其节点的 ID 。然后你改变父母的 listOfChildren 从阵列到具有其儿童的所有标识的按键的对象。
Basically you have one big json object where the key for every node is its node's id. And then you change a parent's listOfChildren from an array to an object that has the keys for all the id's of its children.
要一个新的子添加到您的父母，也很简单。例如：
To add a new child to your parent, is simple. For example:
var parentId = 103;
var newChild = {"id":110,"name":"Child 2","childType":"CHILD1"};
bigobject[parentId].listOfChildren[newChild.id] = newChild;
然后进行分页你的结果，你可以使用内置的 limitTo 过滤器和自定义过滤器 startFrom
And then to paginate your results, you could use the built-in limitTo filter and a custom filter startFrom:
.filter('startFrom', function() {
return function(input, start) {
if(!input) return input;
start = +start;
return input.slice(start);
};
});
然后你的 NG-重复会是这样的：
<div ng-repeat="(parentId, parent) in bigobject | startFrom:start | limitTo:pageSize">
<div ng-repeat="(childId, child) in bigobject[parentId].listOfChildren">
{{parent.name}} - {{child.name}}
</div>
</div>
我希望帮助或者至少指向你有帮助的方向。
I hope that helps or at least points you in a helpful direction.
这篇关于与大型JSON数组AngularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
