Question

最近我遇到了一个问题，我需要从不规则的JavaScript对象创建一个html嵌套列表，我不知道如何继续这个任务。基本上我有一个JavaScript对象，它将文件夹结构表示为树：

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" 
  }
}

基本上我需要做的就是为每个文件夹创建带有嵌套li的ul（这里应该省略路径）。

我非常感谢对此提供任何帮助。

谢谢。

Answer 1

深度首次遍历对象可能会有所帮助：

＆＃13;

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

＆＃13;

从不规则的javascript对象构建HTML嵌套列表（文件夹结构）

1 个答案: