JavaScript對象層次簡化

Question

我有一個類似的平JSON陣列：

var flatObj = 
[ 
    { id : "1", parentid : "0", name : "obj 1" }, 
    { id : "2", parentid : "1", name : "obj 2" }, 
    { id : "3", parentid : "2", name : "obj 3" }, 
    { id : "4", parentid : "3", name : "obj 4" }, 
    { id : "5", parentid : "4", name : "obj 5" }, 
    { id : "6", parentid : "5", name : "obj 6" }, 
    { id : "7", parentid : "1", name : "obj 7" }, 
    { id : "8", parentid : "1", name : "obj 8" }, 
    { id : "9", parentid : "1", name : "obj 9" } 
]; 

我想傳遞一個ID基礎上通過與父ID的ID以顯示該層次結構，並得到一個層次簡單的功能。不太確定，如果我已經知道它會發生多深，那麼我的知識層次就會停在5層。但是，我創建了一個函數來做到這一點，但它的代碼很多？我想減少它可能使用遞歸方法？這是我的功能。

function getItems(id){ 

    if(!id){ 
     document.getElementById("demo").innerHTML = ""; 
     id = document.getElementById("hvitems").value; 
    } 

    for(a=0;a<flatObj.length;a++){ 

     var object_a = flatObj[a]; 
     var object_id_a = object_a.id; 

     if(object_id_a == id){ 

      var object_name_a = object_a.name; 

      document.getElementById("demo").innerHTML += "(" + object_id_a + ") " + object_name_a + "<br>"; 

      // look for parentid's that match the id 
      for(b=0;b<flatObj.length;b++){ 

       var object_b = flatObj[b]; 
       var object_id_b = object_b.id; 
       var object_pid_b = object_b.parentid; 

       if(object_pid_b == object_id_a){ 

        var object_name_b = object_b.name; 

        document.getElementById("demo").innerHTML += " - (" + object_id_b + ") " + object_name_b + "<br>"; 

        // look for parentid's that match the id 
        for(c=0;c<flatObj.length;c++){ 

         var object_c = flatObj[c]; 
         var object_id_c = object_c.id; 
         var object_pid_c = object_c.parentid; 

         if(object_pid_c == object_id_b){ 

          var object_name_c = object_c.name; 

          document.getElementById("demo").innerHTML += " -- (" + object_id_c + ") " + object_name_c + "<br>"; 

          // look for parentid's that match the id 
          for(d=0;d<flatObj.length;d++){ 

           var object_d = flatObj[d]; 
           var object_id_d = object_d.id; 
           var object_pid_d = object_d.parentid; 

           if(object_pid_d == object_id_c){ 

            var object_name_d = object_d.name; 

            document.getElementById("demo").innerHTML += " --- (" + object_id_d + ") " + object_name_d + "<br>"; 

            // look for parentid's that match the id 
            for(e=0;e<flatObj.length;e++){ 

             var object_e = flatObj[e]; 
             var object_id_e = object_e.id; 
             var object_pid_e = object_e.parentid; 

             if(object_pid_e == object_id_d){ 

              var object_name_e = object_e.name; 

              document.getElementById("demo").innerHTML += " ---- (" + object_id_e + ") " + object_name_e + "<br>"; 

              // get all ids of the parentid 

             } 

            } 

           } 

          } 

         } 

        } 

       } 

      } 

     } 

    } 

} 

getItems(1); 
// or getItems(3); ... 

我通過一個div顯示它：

<div id="demo"></div> 

這個偉大的工程，但它似乎我需要遞歸一些理解或更快的方式做到這一點...

這裏我的fiddle

Answer 1

你不應該有N個嵌套循環。這就是爲什麼我們有recursion。

該算法將是以下：

• 對於指數id
  • 找到該項目與此id和輸出信息
  • 查找與parentid等於id所有項目，並使用重複這些步驟他們的id

就這麼簡單：

function getItems(id, indent) { // for index `id` 
    var current = flatObj.filter(function(x) { // find the item... 
     return (x.id == id); // ... with this id 
    })[0]; 

    // and output information 
    document.body.innerHTML += indent + " (" + current.id + ") " + current.name + "<br>"; 

    // find all items ... 
    flatObj.forEach(function(x) {   
     if (x.parentid == id) { // ...with parentid equal to id 
      getItems(x.id, indent + '-'); // and repeat these steps using their ids 
     } 
    }); 
} 

getItems(id, ''); 

indent只是一個字符串裏面是空的開始，並在每次遞歸調用增加一個-，所以它看起來像你的需要。

這是工作JSFiddle example。

請注意，該算法假定它是一個樹並且輸入參數是有效的。它不檢查循環，也不檢查具有這種id的父節點。如果需要，您可以實施它。