javascript - 具有大型 JSON 数组的 AngularJs

Question

1好的，所以我正在开发一个应用程序，它有一个父子层次结构，使用 AngularJs 将从 RESTFUL 网络服务接收的数据绑定(bind)到 View 。

Web 服务将返回的 JSON 示例如下:

{"id":0,"name":"Parent One","listOfChildren":[{"id":0,"name":"Child 1","childType":"CHILD1"},{"id":1,"name":"Child 2","childType":"CHILD1"}]}

根据这些信息，我知道我可以将它放入一个数组中并使用 Angulars ng-repeat 将其显示在表格上，但我的问题是父级可能有成百上千个 child 并且可能有成百上千个 parent 所以数组将是巨大的。

另一个问题是，当我用一个新的 child 更新一个 parent 时，我将不得不遍历整个数组寻找 parent ，然后将 child 插入其中，这是非常低效的。

所以我的问题基本上是有没有什么方法可以更有效地做到这一点而不必使用一个大数组？

感谢您提供的任何帮助。

Answer 1

鉴于你的数据量很大，我不知道真的有一个完美的解决方案。您是否必须同时显示每个 parent 和每个 child ？或者您可以对结果进行分页以便一次只显示 100 个节点吗？在您的示例中， parent 和两个 child 都具有相同的 id 属性值 0。实际情况是这样吗？还是您的 parent 和 child 有唯一的 ID？您可以访问后端网络服务吗？你能改变它提供的 json 格式吗？

对上述问题做出一些假设，这是我能想到的最好的建议:

将您的 JSON 更改为与此类似的格式:

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 从数组更改为一个对象，该对象具有其所有子级 ID 的键。

向您的 parent 添加一个新的 child ，很简单。例如:

var parentId = 103;
var newChild = {"id":110,"name":"Child 2","childType":"CHILD1"};
bigobject[parentId].listOfChildren[newChild.id] = newChild;

然后要对结果进行分页，您可以使用内置的 limitTo 过滤器和自定义过滤器 startFrom:

.filter('startFrom', function() {
    return function(input, start) {
        if(!input) return input;
        start = +start;
        return input.slice(start);
    };
});

然后你的 ng-repeat 会是这样的:

<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>

我希望这对您有所帮助，或者至少为您指明了一个有用的方向。