從不規則的JavaScript對象（文件夾結構）構建HTML嵌套列表

最近我遇到了一個問題，我需要從不規則的JavaScript對象創建一個html嵌套列表，我不知道如何繼續此任務。基本上我有JavaScript對象表示文件夾結構樹：從不規則的JavaScript對象（文件夾結構）構建HTML嵌套列表

var obj = { 
    "Canmon01-srv-13": { 
    "tidata": { 
     "Comite Paritaire SST": { 
     "Securite Machine" : { 
      "01- Development" : { 
      "path": "Canmon01-srv-13/tidata/Comite Paritaire SST/4_Securite_Machine/01 - Developpement" 
      } 
     } 
     } 
    } 
    }, 

    "Cantor-srv-36" : { 
    "TM1-USAEWD01" : { 
     "path": "CANTOR01-SRV-36/TM1-USAEWD01" 
    } 
    }, 

    "FP&A" : { 
    "path" : "FP&A" 
    } 
}

基本上我需要做的，這是爲每個文件夾（路徑應該在這裏中省略）創建嵌套李的UL認證。

我將不勝感激這一個幫助。

謝謝。

來源

2017-06-29 Greg Szul

未知深度的數據結構，通常希望去一個遞歸函數... – CBroe

可能重複HTTPS ：//stackoverflow.com/questions/19357176/creating-nested-list-using-json-and-jquery – GavinBrelstaff

深度對象的優先遍歷可以幫助：

<html> 
 
<body> 
 
    <div id="dir"></div> 
 
</body> 
 
<script> 
 
    var obj = { 
 
     "Canmon01-srv-13": { 
 
      "tidata": { 
 
       "Comite Paritaire SST": { 
 
        "Securite Machine" : { 
 
         "01- Development" : { 
 
          "path": "Canmon01-srv-13/tidata/Comite Paritaire SST/4_Securite_Machine/01 - Developpement" 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     "Cantor-srv-36" : { 
 
      "TM1-USAEWD01" : { 
 
       "path": "CANTOR01-SRV-36/TM1-USAEWD01" 
 
      } 
 
     }, 
 

 
     "FP&A" : { 
 
      "path" : "FP&A" 
 
     } 
 
    }; 
 

 
    var traverse = function(node, str) { 
 
     var keys = Object.keys(node); 
 
     if(keys.length === 1 && keys[0] === 'path') { 
 
      str += "</li>"; 
 
      return str; 
 
     } 
 
     str += "<ul>"; 
 
     keys.forEach(k => { 
 
      str += "<li>" + k; 
 
      str = traverse(node[k], str); 
 
     }); 
 
     str += "</ul>"; 
 
     return str; 
 
    }; 
 
    document.getElementById('dir').innerHTML = traverse(obj, ""); 
 
</script> 
 
</html>

來源

2017-06-29 11:02:02

從不規則的JavaScript對象（文件夾結構）構建HTML嵌套列表

回答

相關問題