Traverse through JSON to find tree path

Question

I am creating a treeview UI from the below Json, I have added the properties node-id, parentId to capture the current expanded structure

I am planning to add a breadcrumb UI component from the selected tree structure.

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

];

Below is the tree

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

If the user selectes Summary then i want to create a breadCrumb which display links like Details-->SubDetails-->Summary . I am assuming to populate the selected structure nodes into an array and then it would be easy to populate breadcrumb from the array.

If the user selects Summary then from the selected node parentId i want to traverse through the JSON array and find the path.

Need help in above logic

See [How to make Automated Dynamic Breadcrumbs with AngularJS + Angular UI Router](http://stackoverflow.com/questions/21970406/how-to-make-automated-dynamic-breadcrumbs-with-angularjs-angular-ui-router). You do need to convert the data to a tree. — Arnold Daniels, Apr 13 '16 at 06:00
I have already created the tree from the above json, just need logic for breadcrumb array. — user804401, Apr 13 '16 at 06:07
How is your click logic handled in the tree, are you just using an `ng-click()` ? — Martijn Welker, Apr 13 '16 at 06:45

LazyDeveloper · Accepted Answer · 2016-04-13T10:21:12.200

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

i added it to display in console , you can check in console

Updated the code

Updated the code this should work , Need to clean it but it works — LazyDeveloper, Apr 13 '16 at 10:21

Traverse through JSON to find tree path

1 Answers1