遍历JSON找到树路

我创建从下面的Json一个TreeView UI，我加的属性节点ID，parentId的捕捉当前扩大结构遍历JSON找到树路

我打算增加一个面包屑UI来自所选树结构的组件。

var tree = [ 
{ name:"Insights", nodeId :"tree-node-0"}, 
{ name:"Level1", nodeId :"tree-node-1", parentId: "tree-node-0"}, 
{ name:"Level2", nodeId :"tree-node-2", parentId:"tree-node-1"}, 
{ name:"Details", nodeId :"tree-node-10"}, 
{ name:"SubDetails", nodeId :"tree-node-11", parentId:"tree-node-10"}, 
{ name:"Summary", nodeId :"tree-node-12", parentId:"tree-node-11"}, 

];

下面是树

Insights 
    | 
    |---Level1 
     | 
     |--Level2 
Details 
    | 
    |--SubDetails 
     | 
     |--Summary

如果用户selectes总结的话，我想创建一个面包屑，类似的细节显示链接 - > SubDetails - >摘要。我假设将选定的结构节点填充到数组中，然后从数组中填充面包屑会很容易。

如果用户选择摘要，然后从选定的节点parentId我想遍历JSON数组并找到路径。

需要帮助上述逻辑

来源

2016-04-13 user804401

请参阅检查[如何使自动动态面包屑与AngularJS + Angular UI路由器]（http://stackoverflow.com/questions/21970406/how-to-make-automated-dynamic-breadcrumbs-w第i-angularjs棱角-UI-路由器）。您确实需要将数据转换为树。 –

我已经从上面的json创建了树，只需要面包屑数组的逻辑。 – user804401

树中的点击逻辑是如何处理的，你只是使用'ng-click（）'而已？ –

var tree = [{ 
 
    name: "Insights", 
 
    nodeId: "tree-node-0" 
 
    }, { 
 
    name: "Level1", 
 
    nodeId: "tree-node-1", 
 
    parentId: "tree-node-0" 
 
    }, { 
 
    name: "Level2", 
 
    nodeId: "tree-node-2", 
 
    parentId: "tree-node-1" 
 
    }, { 
 
    name: "Details", 
 
    nodeId: "tree-node-10" 
 
    }, { 
 
    name: "SubDetails", 
 
    nodeId: "tree-node-11", 
 
    parentId: "tree-node-10" 
 
    }, { 
 
    name: "Summary", 
 
    nodeId: "tree-node-12", 
 
    parentId: "tree-node-11" 
 
    }, 
 

 
]; 
 

 
function test(Name, testData) { 
 
    var testData = testData || []; 
 
    var node = tree.find(function(item) { 
 
    return item.name == Name; 
 
    }); 
 
    if (node) { 
 
    testData.push(node.name); 
 
    var parent = tree.find(function(item) { 
 
     return item.nodeId == node.parentId; 
 
    }); 
 
    if (parent) { 
 
     return test(parent.name, testData); 
 
    } else { 
 
     return testData; 
 
    } 
 

 
    } else { 
 
    return testData; 
 
    } 
 
} 
 

 
console.log(test('Summary'));

我增加它在控制台显示，您可以在控制台

更新代码

来源

2016-04-13 07:21:14 LazyDeveloper

更新了这个应该工作的代码，需要清理它，但它的工作原理 – LazyDeveloper

谢谢，这很有效。 – user804401

遍历JSON找到树路

回答

相关问题