JavaScript從一組URL中獲取樹

Question

夥計們正試圖創建一個動態菜單列表。用戶可以創建的元素的深度沒有限制。

我的問題

我的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 > li形式呈現，以創建菜單層次格式 - 在前面-結束。

的層次應該是這樣的：

[ 
    { 
    "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"是推進食物的孩子們：[ ]其中這些應該是內部布的孩子：[]

我用的是從Here

我試圖獲得myself-，但它不是單擊完全正確的又一個算法採取的解決方案。如果有人已經有解決方案，請幫助。如果我可以自己得到解決方案，我會在這裏分享。 以上代碼是 謝謝

Answer 1

以下是邏輯。這裏是這種邏輯的Working Fiddle

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);

限制：如果父節點的子節點之前被解析，因此建議進行排序的 名單這個邏輯工作網址（即json_data[]）也是如此。這裏的Sorting-before + tree-structuring-the-sorted

希望的片段，這是有幫助的