печати все пути от корневого узла до листовых узлов - Javascript

Question

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

     }) 

    } 

Так я хочу, чтобы отобразить дерево категорий следующим образом: Мобильные & Аксессуары -> МОБИЛЬНЫЕ

Мобильные & Аксессуары -> Зарядные устройства

My JS Fiddle: http://jsfiddle.net/tfa8n5tj/

Answer 1

Считаю, что вы хотите, чтобы ваша функция выглядела так:

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

Answer 2

См. http://jsfiddle.net/sjmcpherso/kc9fehyz/ здесь. Я создал иерархический набор элементов списка с использованием рекурсии & итерации. Поскольку манипулирование циклами DOM in может сильно повлиять на производительность, я создал виртуальную 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