AngularJS-Json到Tree結構

Question

我已經看到了許多答案，這些答案使Json的響應變成了Ul Tree結構。 問題是所有這些主題都圍繞嵌套響應指出了父對象和子對象之間的關系。

我有一個非嵌套的Json響應，它通過引用objects屬性來指示關系。

以下是響應的一部分：

{“ id”：“ 1”，“ parent_id”：null，“名稱”：“ Item-0”}，{“ id”：“ 2”，“ parent_id”：“ 1”，“名稱”：“ Item- 1“}，{” id“：” 3“，” parent_id“：” 2“，”名稱“：” Item-2“}，{” id“：” 4“，” parent_id“：” 2“，” name“：” Item-4“}，{” id“：” 5“，” parent_id“：” 2“，” name“：” Item-5“}，{” id“：” 6“，” parent_id“ ：“ 2”，“名稱”：“ Item-6”}，{“ id”：“ 7”，“ parent_id”：“ 2”，“名稱”：“ Item-7”}，{“ id”：“ 8“，” parent_id“：” 2“，”名稱“：” Item-8“}，{” id“：” 9“，” parent_id“：” 2“，”名稱“：” Item-9“}， {“ id”：“ 10”，“ parent_id”：“ 1”，“名稱”：“ Item-3”}，{“ id”：“ 11”，“ parent_id”：“ 10”，“名稱”：“項目-10" }，

您可能已經注意到，每個對象都通過與其父代ID關聯的parent_id與他的父親聯系。

我試圖創建一個自定義指令來讀取響應並通過遞歸來構建Tree結構。

到現在為止，我僅成功創建了樹的第一級。 演示

app.directive('tree',function(){
    var treeStructure = {
        restrict: "E",
        transclude: true,
        root:{
            response : "=src",
            Parent : "=parent"
        },
        link: function(scope, element, attrs){
            var log = [];
            scope.recursion = "";
            angular.forEach(scope.response, function(value, key) {
                if(value.parent_id == scope.Parent){
                    this.push(value);
                }
            }, log);
            scope.filteredItems = log;

            scope.getLength = function (id){
                var test = [];
                angular.forEach(scope.response, function(value, key) {
                    if(value.parent_id == id){
                        this.push(value);
                    }
                }, test);
                if(test.length > 0){
                    scope.recursion = '<tree src="scope.response" parent="'+id+'"></tree>';
                }
                return scope.recursion;
            };
        },
        template:
            '<ul>'
                +'<li ng-repeat="item in filteredItems">'
                    +'{{item.name}}<br />'
                    +'{{getLength(item.id)}}'
                +'</li>'
            +'<ul>'
    };
    return treeStructure;
});

app.controller('jManajer', function($scope){
    $scope.information = {
        legend : "Angular controlled JSon response",
    };

    $scope.response = [
        {"id":"1","parent_id":null,"name":"Item-0"},
        {"id":"2","parent_id":"1","name":"Item-1"},
        {"id":"3","parent_id":"2","name":"Item-3"},
        {"id":"4","parent_id":"2","name":"Item-4"},
        {"id":"5","parent_id":"2","name":"Item-5"},
        {"id":"6","parent_id":"2","name":"Item-6"},
        {"id":"7","parent_id":"2","name":"Item-7"},
        {"id":"8","parent_id":"2","name":"Item-8"},
        {"id":"9","parent_id":"2","name":"Item-9"},
        {"id":"10","parent_id":"1","name":"Item-2"},
        {"id":"11","parent_id":"10","name":"Item-10"},
    ];
});

有誰能向我展示如何通過遞歸將這種數組轉換為Tree結構？

Answer 1

首先在嵌套數組中遞歸轉換數組

 var myApp = angular.module('myApp', []); myApp.controller('jManajer', function($scope) { $scope.res = []; $scope.response = [{ "id": "1", "parent_id": 0, "name": "Item-0" }, { "id": "2", "parent_id": "1", "name": "Item-1" }, { "id": "3", "parent_id": "2", "name": "Item-3" }, { "id": "4", "parent_id": "2", "name": "Item-4" }, { "id": "5", "parent_id": "2", "name": "Item-5" }, { "id": "6", "parent_id": "2", "name": "Item-6" }, { "id": "7", "parent_id": "2", "name": "Item-7" }, { "id": "8", "parent_id": "2", "name": "Item-8" }, { "id": "9", "parent_id": "2", "name": "Item-9" }, { "id": "10", "parent_id": "1", "name": "Item-2" }, { "id": "11", "parent_id": "10", "name": "Item-10" }, ]; function getNestedChildren(arr, parent) { var out = [] for (var i in arr) { if (arr[i].parent_id == parent) { var children = getNestedChildren(arr, arr[i].id) if (children.length) { arr[i].children = children } out.push(arr[i]) } } return out } $scope.res = getNestedChildren($scope.response, "0"); console.log($scope.res); $scope.nested_array_stingified = JSON.stringify($scope.res); });

 <!DOCTYPE html> <html> <head> <script src="https://code.angularjs.org/1.3.11/angular.js"></script> </head> <body ng-app="myApp" ng-controller="jManajer"> {{nested_array_stingified}} </body> </html>

之后，您可以按照此處的教程操作，例如http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

Answer 2

您需要先展開數據，然后再將其傳遞到視圖。 我對您的代碼進行了一些修改，也對您的數據進行了轉換，並用整數替換了depth和Relation字段，比較整數比比較字符串和null值更容易。

在此示例中，我使用了Undescore.js的強大功能來展開數組。

可以在指令中找到該代碼作為輔助函數：

unflatten = function (array, parent, tree) {

    tree = typeof tree !== 'undefined' ? tree : [];
    parent = typeof parent !== 'undefined' ? parent : {
        id: "0"
    };

    var children = _.filter(array, function (child) {
        return child.parent_id == parent.id;
    });

    if (!_.isEmpty(children)) {
        if (parent.id == "0" || parent.id == null) {
            tree = children;
        } else {
            parent['children'] = children
        }
        _.each(children, function (child) {
            unflatten(array, child)
        });
    }
    console.log(tree)
    return tree;
}

如果您想要VanillaJs解決方案，請查看這段代碼

這也是一個演示如何使用數據模擬交互式樹的演示

下划線的展開功能是從此處開始的。

AngularJS-Json到Tree結構

問題描述

2 個解決方案

解決方案1
2 2015-01-31 13:57:11

解決方案2
1 已采納 2015-01-31 15:26:14

AngularJS-Json到Tree結構

問題描述

2 個解決方案

解決方案1 2 2015-01-31 13:57:11

解決方案2 1 已采納 2015-01-31 15:26:14

解決方案1
2 2015-01-31 13:57:11

解決方案2
1 已采納 2015-01-31 15:26:14