javascript - 嵌套 for 循环从嵌套数组创建节/div

Question

我有一些嵌套的 Json 数组需要在网站上显示。本质上，我正在导出 hyper V 主机及其虚拟机，并希望以 html 形式显示它们。

我很好地从 json 中获取数据，并将其放入脚本标记中的 html 索引上的 var 中。 (原因是为了避免需要网络服务器，长话短说有工作限制)

我无法弄清楚如何读取数组项和嵌套循环以在部分中显示 Hyper V，然后在每个部分中将其虚拟机列为 div。

这是我导入的 json 数据的精简版本(在我的 html 中，它是一个长字符串，在此处间隔开以便于阅读。

<script type="text/javascript">
var sample =
[
    {
        "host1.domain.com.au":[
            {
                "SERVER1":{
                    "Replication Status":"Nil",
                    "VM Name":"SERVER1",
                    "RAM":8,
                    "CPUs":4,
                    "Hard Drives":128849018880,
                    "IP Address":null
                },
                "SERVER2":{
                    "Replication Status":"Primary",
                    "VM Name":"SERVER2",
                    "RAM":8,
                    "CPUs":4,
                    "Hard Drives":128849018880,
                    "IP Address":null
                }
            }
        ]
    },
    {
        "host2.domain.com.au":[
            {
                "SERVER3":{
                    "Replication Status":"Primary",
                    "VM Name":"SERVER3",
                    "RAM":8,
                    "CPUs":4,
                    "Hard Drives":107374182400,
                    "IP Address":"10.69.185.113"
                },
                "SERVER4":{
                    "Replication Status":"Primary",
                    "VM Name":"SERVER4",
                    "RAM":8,
                    "CPUs":2,
                    "Hard Drives":64424509440,
                    "IP Address":"10.69.185.25"
                }
            }
        ]
    }
];
</script>

我想要的示例是:

    <section class="hyperv-host">    
        <h1>host1.domain.com.au</h1>
        <div class="vm">
            <h2>SERVER1</h2>
        <div class="vm">
            <h2>SERVER2</h2>
    </section>
    <section class="hyperv-host">    
        <h1>host2.domain.com.au</h1>
        <div class="vm">
            <h2>SERVER3</h2>
        <div class="vm">
            <h2>SERVER4</h2>
    </section>

我可以将主机分成几个部分，但它涉及创建一个新数组，然后该数组没有其余数据，因此我无法在其中嵌套循环。所以迷失了。

Answer 1

这里有一个非常简单的例子来说明如何进行锻炼。对于嵌套的 for 循环感到抱歉，但首先它可能会更容易理解。

var sample =
      [{"host1.domain.com.au":[
          {"SERVER1":{"Replication Status":"Nil","VM Name":"SERVER1","RAM":  8,"CPUs":
                4,"Hard Drives":128849018880,"IP Address":null},
            "SERVER2":{"Replication Status":  "Primary","VM Name":"SERVER2","RAM":
                8,"CPUs":  4,"Hard Drives":  128849018880,"IP Address":  null}}]},
        {"host2.domain.com.au":[
            {"SERVER3":{"Replication Status":  "Primary","VM Name":"SERVER3","RAM":8,"CPUs":4,"Hard Drives":  107374182400,"IP Address":"10.69.185.113"},
              "SERVER4":{"Replication Status":"Primary","VM Name":"SERVER4",
                "RAM":8,"CPUs":2,"Hard Drives":64424509440,"IP Address":
                  "10.69.185.25"}}]
        }];
    var html = '';

    for (var i=0; i < sample.length; i++) {
      var v = sample[i];
      var host_name = Object.keys(v)[0];      
      var html_servers = '';

      for (var i2=0; i2 < v[host_name].length; i2++) {
        var v2 = v[host_name][i2];
        var servers = Object.keys(v2);

        for (var i3=0; i3 < servers.length; i3++) {          
          html_servers += '<div class="vm">'+ servers[i3] +'</div>';
        }
      }

      html +=
        '<section class="hyperv-host">' +
          '<h1>'+ host_name +'</h1>' +
          html_servers +
        '</section>';
    }

    // With html you can use append to some <div> on your html
    console.log(html);
    var e = document.getElementById('id_of_your_element');
    e.innerHTML = html;