[英]AngularJS - Json to Tree structure
I 've seen lots of answers that turn a Json response to a Ul Tree structure. 我已经看到了许多答案,这些答案使Json的响应变成了Ul Tree结构。 The thing is that all these subjects where around a nested response pointing out the relationship between parent object and child object.
问题是所有这些主题都围绕嵌套响应指出了父对象和子对象之间的关系。
I have a non nested Json response indicating the relation by reference to the objects property. 我有一个非嵌套的Json响应,它通过引用objects属性来指示关系。
The following is part of the response: 以下是响应的一部分:
{"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"},
{“ 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" },
You might already noticed that the each object conects with his father through the parent_id which is conected to his parent's id. 您可能已经注意到,每个对象都通过与其父代ID关联的parent_id与他的父亲联系。
I tried to create a custom directive to read the response and through recursion to build the Tree structure. 我试图创建一个自定义指令来读取响应并通过递归来构建Tree结构。
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? 有谁能向我展示如何通过递归将这种数组转换为Tree结构?
Transform your array first recursive in a nested one 首先在嵌套数组中递归转换数组
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>
After that you can follow the tutorial here for example http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ 之后,您可以按照此处的教程操作,例如http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
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.
我对您的代码进行了一些修改,也对您的数据进行了转换,并用整数替换了depth和Relation字段,比较整数比比较字符串和null值更容易。
In this example I have used Undescore.js' powerful functions in order to unflatten the array. 在此示例中,我使用了Undescore.js的强大功能来展开数组。
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;
}
If you want a VanillaJs solution check out this piece of code 如果您想要VanillaJs解决方案,请查看这段代码
Also here is a demo simulating an interactive tree with your data 这也是一个演示如何使用数据模拟交互式树的演示
The underscore unflatten function was taken from here . 下划线的展开功能是从此处开始的 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.