显示 javascript 中节点的可能路径

Question

我正在尝试显示 javascript 中节点的所有可能路径：

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

function formCategoryTrees(object, parentNode) {
    
    var div = document.getElementById("output");
     _.each(object,function(objectValues){
         var leafCategoryId = objectValues["id"];
         var leafCategoryName =  objectValues["name"];
         
         if(parentNode === null){
             div.innerHTML = div.innerHTML + leafCategoryName + "</br>";
         } else {
             div.innerHTML = div.innerHTML + parentNode + "->" + leafCategoryName + " " + leafCategoryId + "</br>";
         }

         var hasChildren = objectValues.hasOwnProperty("children");
         var childValue = objectValues["children"];
         
         if(hasChildren && childValue !== null) {
             formCategoryTrees(objectValues["children"], leafCategoryName);
         }
        
      });
  }

formCategoryTrees(object.records, null);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="output"></div>

https://jsfiddle.net/tfa8n5tj/3/

当前结果为：

Kitchen
Jewellery
BabyProducts
Books
Books->Story Books 689
Story Books->Children's Story Books 690
Apparel

但我需要展示

Kitchen
Jewellery
BabyProducts
Books
Books->Story Books 689
Books->Story Books->Children's Story Books 690
Apparel

请帮忙

Answer 1

这个怎么样？

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

function formCategoryTrees(records, prefix) {
    var div = document.getElementById("output");
     _.each(records,function(record){
         
         div.innerHTML = div.innerHTML + prefix + record.name + (prefix ? ' ' + record.id: '') + '</br>';

         if(record.children) {
             formCategoryTrees(record.children, prefix + record.name + '->');
         }
        
      });
}

formCategoryTrees(object.records, '')

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="output"></div>

Answer 2

深度优先树遍历算法的实现。

var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"parent_id":0,"children":null},{"name":"BabyProducts","id":668,"parent_id":0,"children":null},{"name":"Books","id":669,"parent_id":0,"children":[{"name":"Story Books","id":689,"parent_id":669,"children":[{"name":"Children's Story Books","id":690,"parent_id":689,"children":null}]}]},{"name":"Apparel","id":670,"parent_id":0,"children":null}]};

browse({ children: object.records }, '', function (node, path) {
  if (!path) return;
  if (node.parent_id) path += ' (' + node.id + ')';
  print(path);
});

function browse (tree, path, forEachNode) {
  var i, node;
  var nodes = tree.children;
  var l = nodes ? nodes.length : 0;
  forEachNode(tree, path);
  if (path !== '') path += ' -> ';
  for (i = 0; i < l; i++) {
    node = nodes[i];
    browse(node, path + node.name, forEachNode);
  }
}

function print (html) {
  document.body.innerHTML += html + '<br />';
}

显示 javascript 中节点的可能路径

Show possible paths to nodes in javascript

javascript

underscore.js