1

1Ok では、AngularJs を使用して RESTFUL Web サービスから受信したデータをビューにバインドする親子階層を持つアプリケーションを開発しています。

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 を使用してテーブルに表示できることはわかっていますが、私の問題は、親が数百/数千の子を持つ可能性があり、数百/数千の親が存在する可能性があるため、配列が巨大になることです.

別の問題は、親を新しい子で更新するときに、配列全体を走査して親を探し、子を挿入する必要があることです。これは非常に非効率的です。

だから私の質問は基本的に、1 つの大きな配列を使用せずにこれをより効率的に行う方法はありますか?

助けてくれてありがとう。

4

1 に答える 1

3

膨大な量のデータがあることを考えると、本当に完璧なソリューションがあるかどうかはわかりません。一度にすべての親とすべての子を表示する必要がありますか? または、一度に 100 個のノードしか表示しないように、結果をページ付けできますか? あなたの例では、親と両方の子が同じ id プロパティ値 0 を持っています。それは実際に当てはまりますか? または、あなたの両親と子供は一意のIDを持っていますか? バックエンド Web サービスにアクセスできますか? 提供する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
}

基本的に、すべてのノードのキーがそのノードの .xml である 1 つの大きな json オブジェクトがありますid。次に、親listOfChildrenを配列から、その子のすべての ID のキーを持つオブジェクトに変更します。

親に新しい子を追加するのは簡単です。例えば：

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>

それが役立つか、少なくとも役立つ方向にあなたを向けることを願っています.

于 2013-11-14T14:48:48.700 に答える