Javascript leitet einen Baum aus einer Reihe von URLs

Question

Jungs versucht, eine dynamische Menüliste zu erstellen. Es gibt keine Begrenzung für die Tiefe der Elemente, die von einem Benutzer erstellt werden können.

MEIN PROBLEM

sieht Mein Satz von URL wie diese

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

möchte ich die titles in einer Hierarchie-Format sein, die schließlich machen werde ich von ul > li in Form des Menüs erstellen - vor -Ende.

Die Hierarchie sollte wie folgt sein:

[ 
    { 
    "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": [] 
     } 
    ] 
    } 
] 

WAS habe ich versucht,

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

Und das Ergebnis es ergibt, ist dies:

[ 
    { 
    "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": [] 
    } 
] 

Die Elemente "T Shirt" und "Shirt" ist geschoben in die Food's Kinder: [

Here aus genommen wird []

Die Lösung, die ich verwendet habe ich versucht, einen Algorithmus abzuleiten mich selber, aber es ist nicht genau das Richtige noch angeklickt:], die diese sollten innerhalb Cloth Kinder sein. Bitte helfen Sie, wenn jemand bereits eine Lösung hat. Falls ich selbst eine Lösung finden kann, werde ich es hier teilen. obigen Code ist Dank

Answer 1

Unten ist die Logik. hier ist ein 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);

Begrenzung dieser Logik: Diese Logik funktioniert, wenn der übergeordnete Knoten, bevor die untergeordneten Knoten analysiert wird, daher empfiehlt es sich, die Liste der zu sortieren URLs (zB json_data[]) ebenfalls. Hier ist ein Ausschnitt von Sorting-before + tree-structuring-the-sorted

Hope this hilfreich