[英]How to create a tree structure from JSON data
我在JSON中有一個像這樣的列表:
var arr=[
{
"text":"text1",
"id" :"1",
//no parent id
},
{
"text":"text2",
"id" :"2",
"idParent":"1"
},
{
"text":"text3",
"id" :"3",
"idParent":"2"
},
{
"text":"text4",
"id" :"4",
"idParent":"1"
},
{
"text":"text5",
"id" :"5",
//no parent id
},
];
而且我需要像下面這樣在層次結構樹中轉換該列表:
var arr = [
{
"text": "Parent 1",
"id" : "1",
"nodes": [
{
"text": "Child 1",
"id" : "2",
"parentid" : "1",
"nodes": [
{
"text": "Grandchild 1",
"id" : "4",
"parentid" : "2",
},
{
"text": "Grandchild 2",
"id" : "8",
"parentid" : "2",
}
]
},
{
"text": "Child 2",
"id" : "10",
"parentid" : "1",
}
]
},
{
"text": "Parent 2",
"id" : "19",
//no parent id
}
];
只有根父母沒有“父母”元素。
¿如何使用Javascript執行此操作?
在此先感謝您的幫助。
無序節點的解決方案。
var arr = [ { text: "text3", id: "3", parentId: "2" }, { text: "text2", id: "2", parentId: "1" }, { text: "text4", id: "4", parentId: "1" }, { text: "text1", id: "1", /* no parent id */ }, { text: "text5", id: "5", /* no parent id */ } ], data = arr.reduce(function (r, a) { function getParent(s, b) { return b.id === a.parentId ? b : (b.nodes && b.nodes.reduce(getParent, s)); } var index = 0, node; if ('parentId' in a) { node = r.reduce(getParent, {}); } if (node && Object.keys(node).length) { node.nodes = node.nodes || []; node.nodes.push(a); } else { while (index < r.length) { if (r[index].parentId === a.id) { a.nodes = (a.nodes || []).concat(r.splice(index, 1)); } else { index++; } } r.push(a); } return r; }, []); document.write('<pre>' + JSON.stringify(data, 0, 4) + '</pre>');
我在這里使用對象作為映射,否則,您必須遍歷所有數組元素以搜索節點的ID,並且刪除元素也更加容易。 因為映射的鍵必須是字符串,所以toString()函數在那里。
// we use a map for search for the nodes by their ids
var nodes_map = {};
// we copy all the elements into the map, where the keys are the ids of the nodes
for ( var i=0; i<arr.length; ++i )
{
// create nodes array for each node
arr[ i ].nodes = [];
// copy into the map
nodes_map[ arr[i].id.toSting() ] = arr[ i ];
}
// we iterate through all nodes, and add them into their parent's node array
for ( var key in nodes_map )
{
// current node
var node = nodes_map[ key ];
// if the current node have idParent property, and the parent exists in the map
if ( "idParent" in node && node.idParent.toSting() in nodes_map )
{
// we add the current node to the parent's nodes array
nodes_map[ node.idParent.toSting() ].nodes.push( node );
}
}
// we remove all the nodes from the map, that has parents
for ( var key in nodes_map )
{
// current node
var node = nodes_map[ key ];
// if it has idParent property
if ( "idParent" in node )
{
// we remove from the map
delete nodes_map[ key ];
}
}
// results array
var new_arr = [];
// copy back the nodes from the map into an array
for ( var key in nodes_map )
{
new_arr.push( nodes_map[ key ] );
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.