AngularJS - JSON来树形结构 [英] AngularJS - Json to Tree structure

问题描述

我见过很多了把一个JSON响应UL树结构的答案。
问题是，所有这些问题，其中围绕一个嵌套响应指点
出父对象和子对象之间的关系。

I 've seen lots of answers that turn a Json response to a Ul Tree structure. The thing is that all these subjects where around a nested response pointing out the relationship between parent object and child object.

我有一个非嵌套JSON响应指示通过参考对象属性的关系

I have a non nested Json response indicating the relation by reference to the objects property.

响应的下面是部分

{ID：1，PARENT_ID：空，名：项目-0}，
  {编码：2，PARENT_ID：1，名称：项目1}，
  {编码：3，PARENT_ID：2，名称：项目2}，
  {编码：4，PARENT_ID：2，名称：项目-4}，
  {ID：5，PARENT_ID：2，名：项目-5}，
  {编码：6，PARENT_ID：2，名称：项目-6}，
  {ID：7，PARENT_ID：2，名：项目-7}，
  {编码：8，PARENT_ID：2，名称：项目-8}，
  {ID：9，PARENT_ID：2，名：项目-9}，
  {ID：10，PARENT_ID：1，名：项目-3}，
  {ID：11，PARENT_ID：10，名：项目-10}

{"id":"1","parent_id":null,"name":"Item-0"}, {"id":"2","parent_id":"1","name":"Item-1"}, {"id":"3","parent_id":"2","name":"Item-2"}, {"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-3"}, {"id":"11","parent_id":"10","name":"Item-10"},

您可能已经注意到，每个对象conects与他的父亲通过其conected其父母的id的PARENT_ID。

You might already noticed that the each object conects with his father through the parent_id which is conected to his parent's id.

我试图创建一个自定义指令读取响应，并通过递归构建树结构。

I tried to create a custom directive to read the response and through recursion to build the Tree structure.

到现在我成功了，只创建树的第一层。
演示

Till now I succeeded to only create the first level of the tree. Demo

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"},
    ];
});

有没有谁可以告诉我怎么通过递归这种类型的数组转换为树形结构？任何一个

Is there any one who could show me how to convert this kind of array to Tree structure through recursion?

推荐答案

您需要将它传递给你的视图之前unflatten您的数据。
我已修改了code了一下，还我已经改变了你的数据，取而代之的是整数的深度和关系领域，它更容易比较的整数，而不是比较字符串和空值。

You need to unflatten your data before passing it to your view. I have modified your code a bit, also I have transformed your data and replaced the depth and relational fields with integers, it's more easy to compare integers rather than comparing strings and null values.

在此例如我已经为了unflatten阵列使用Undescore.js强大的功能。

In this example I have used Undescore.js' powerful functions in order to unflatten the array.

在code可以发现你的指令内部的辅助函数：

The code can be found as a helper function inside your directive:

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解决看看这个一张code

If you want a VanillaJs solution check out this piece of code

另外这里是一个演示模拟交互树与您的数据

Also here is a demo simulating an interactive tree with your data

下划线unflatten功能拍摄<一个href=\"http://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript#22072374\">from这里。

The underscore unflatten function was taken from here .

这篇关于AngularJS - JSON来树形结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！