打印从根节点到叶节点的所有路径 - javascript答案

【问题标题】：Print all paths from root node to leaf nodes - javascript打印从根节点到叶节点的所有路径 - javascript
【发布时间】：2015-09-02 02:34:46
【问题描述】：

    function formCategoryTrees(object) {
     _.each(object,function(objectValues){


         var leafCategoryId = objectValues["id"];
         var leafCategoryName =  objectValues["name"];
         console.log(leafCategoryName+""+leafCategoryId );
        if (objectValues.hasOwnProperty("children")) {
            if (typeof objectValues["children"] == 'object')
                 console.log("In");
                formCategoryTrees(objectValues["children"]);
            }else{
console.log(leafCategoryName);
            }

      })

  }

所以我想按如下方式显示类别树： 手机和配件 -> 手机

手机和配件 -> 充电器

我的 JS 小提琴：http://jsfiddle.net/tfa8n5tj/

【问题讨论】：

最好有 JSFidddle 或 JSBin
添加它......
您可以将 JSON 复制/粘贴到代码中而不是屏幕截图中吗？
@JamieBabineau 已添加 jsfiddle
你基本上是在问如何在你的html中拥有相同类型的嵌套？

标签： javascript underscore.js

【解决方案1】：

请参阅http://jsfiddle.net/sjmcpherso/kc9fehyz/ 此处我使用递归和迭代创建了一组分层列表元素。由于循环操作 DOM 会极大地影响性能，因此我创建了一个虚拟 DOM，并在流程结束时附加到真实 DOM。

var vDOM = document.createDocumentFragment(); //Create a Document Fragment to store your Virtual DOM
function formCategoryTrees(object,par) { //Use the parent node as a parameter to create hierarchy
   var ul = document.createElement('ul');
   _.each(object,function(objectValues ){       
        var li = document.createElement('li');
        var leafCategoryId = objectValues["id"];
        var leafCategoryName =  objectValues["name"]; 
        li.appendChild(document.createTextNode(leafCategoryName + " " + leafCategoryId));

        if(objectValues["children"]) {      
                formCategoryTrees(objectValues["children"],li);
        }
        ul.appendChild(li);

    })    
    par.appendChild(ul);  //Append to the parent node after each iteration
}
formCategoryTrees(object.records,vDOM);
document.body.appendChild(vDOM); //Append your Virtual DOM to your page

【讨论】：

【解决方案2】：

我相信您希望您的函数如下所示：

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 + " " + leafCategoryId +"</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);

【讨论】：