JavaScript从一组URL中派生一棵树

伙计们正在尝试创build一个dynamic菜单列表。 用户可以创build的元素的深度没有限制。

我的问题

我的一组url如下所示

var json_data = [ { "title" : "Food", "path" : "/root", }, { "title" : "Cloths", "path" : "/root", }, { "title" : "Veg", "path" : "/root/Food", }, { "title" : "Brinjal", "path" : "/root/Food/Veg", }, { "title" : "T shirt", "path" : "/root/Cloths", }, { "title" : "Shirt", "path" : "/root/Cloths", }, { "title" : "Green brinjal", "path" : "/root/Food/Veg/Brinjal", } ]; 

我希望titles是以层次结构格式，我最终将以ul > liforms呈现，以在前端创build菜单。

层次结构应该是这样的：

 [ { "title": "Food", "path": "/root", "children": [ { "title": "Veg", "path": "/root/Food", "children": [ { "title": "Brinjal", "path": "/root/Food/Veg", "children": [ { "title": "Green brinjal", "path": "/root/Food/Veg/Brinjal", "children": [] } ] } ] } ] }, { "title": "Cloths", "path": "/root", "children": [ { "title": "T shirt", "path": "/root/Cloths", "children": [] }, { "title": "Shirt", "path": "/root/Cloths", "children": [] } ] } ] 

我试过了什么

  // Add an item node in the tree, at the right position function addToTree( node, treeNodes ) { // Check if the item node should inserted in a subnode for ( var i=0; i<treeNodes.length; i++ ) { var treeNode = treeNodes[i]; // "/store/travel".indexOf( '/store/' ) if ( node.path.indexOf( treeNode.path + '/' ) == 0 ) { addToTree( node, treeNode.children ); // Item node was added, we can quit return; } } // Item node was not added to a subnode, so it's a sibling of these treeNodes treeNodes.push({ title: node.title, path: node.path, children: [] }); } //Create the item tree starting from menuItems function createTree( nodes ){ var tree = []; for ( var i=0; i<nodes.length; i++ ) { var node = nodes[i]; addToTree( node, tree ); } return tree; } // variable = "json_data" is the set of URLS var menuItemsTree = createTree( json_data ); console.log(menuItemsTree) 

其结果是这样的：

 [ { "title": "Food", "path": "/root", "children": [ { "title": "Veg", "path": "/root/Food", "children": [ { "title": "Brinjal", "path": "/root/Food/Veg", "children": [ { "title": "Green brinjal", "path": "/root/Food/Veg/Brinjal", "children": [] } ] } ] }, { "title": "T shirt", "path": "/root/Cloths", "children": [] }, { "title": "Shirt", "path": "/root/Cloths", "children": [] } ] }, { "title": "Cloths", "path": "/root", "children": [] } ] 

"T Shirt"和"Shirt"的元素被推入食物的孩子里面：[]这些应该在布料的孩子里面：[]

我已经使用的解决scheme是从这里

我试图自己推导出一个algorithm – 但它没有完全正确的点击。 如果有人已经有解决scheme，请帮助。 如果我自己可以得到解决scheme，我会在这里分享。 以上代码是谢谢

Answer 1

以下是逻辑。 这里是一个工作小提琴

 var json_data = [{ "title": "Food", "path": "/root", }, { "title": "Cloths", "path": "/root", }, { "title": "Veg", "path": "/root/Food", }, { "title": "Brinjal", "path": "/root/Food/Veg", }, { "title": "T shirt", "path": "/root/Cloths", }, { "title": "Shirt", "path": "/root/Cloths", }, { "title": "Green brinjal", "path": "/root/Food/Veg/Brinjal", },{ "title": "Test cloth", "path": "/root/Cloths/Shirt", }]; // Add an item node in the tree, at the right position function addToTree(node, treeNodes) { var parentNode = GetTheParentNodeChildArray(node.path, treeNodes) || treeNodes; parentNode.push({ title: node.title, path: node.path, children: [] }); } function GetTheParentNodeChildArray(path, treeNodes) { for (var i = 0; i < treeNodes.length; i++) { var treeNode = treeNodes[i]; if (path === (treeNode.path + '/' + treeNode.title)) { return treeNode.children; } else if (treeNode.children.length > 0) { var possibleParent = false; treeNode.children.forEach(function(item) { if (path.indexOf(item.path + '/' + item.title) == 0) { possibleParent = true; return false; } }); if (possibleParent) { return GetTheParentNodeChildArray(path, treeNode.children) } } } } //Create the item tree starting from menuItems function createTree(nodes) { var tree = []; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; addToTree(node, tree); } return tree; } // variable = "json_data" is the set of URLS var menuItemsTree = createTree(json_data); console.log(menuItemsTree);