从不规则的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嵌套列表

回答

相关问题