Вложено для циклов для создания разделов / делений из вложенных массивов

Question

У меня есть несколько вложенных массивов Json, которые мне нужно отобразить на веб-сайте. По сути, я экспортирую Hyper V хосты и их VMS и хочу отобразить их в формате HTML.

Я получаю данные из json нормально и помещается в переменную моего html-индекса в теге сценария. (Причина заключается в том, чтобы избежать необходимости веб-сервера, длинные истории имеют ограничения по работе)

У меня возникают проблемы с выяснением, как читать элементы массива и циклы вложений, чтобы отображать Hyper V в разделах, а затем перечислять их vms как 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

Вот очень простой пример того, как это может работать.Извините за вложенные циклы, но, вероятно, будет проще понять.

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;

Answer 2

Вы могли бы сделать что-то вроде этого:

var sample =  [
  {
    "host1.domain.com.au":[
      {
        "SERVER1":{
          "Replication Status":"Nil",
          "VM Name":"SERVER1",
          "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"
        }
      }
    ]
  }
];

//This gets each host as a key
const sampleHosts = Object.keys(sample[0]);

//Iterate through every key of the sample
sampleHosts.forEach(function (host) {
  //Create a new section element and give it the right class
  let hostSection = document.createElement("section");
  hostSection.classList.add("hyperv-host");

  //Create a new h1 element and set it's text content to the current host
  let hostHeader = document.createElement("h1");
  hostHeader.textContent = host;

  //Append the header to the newly created section
  hostSection.append(hostHeader);

  //We now grab the servers from the host
  const serverArray = sample[0][host][0];

  //get the rows ready based on the current servers
  const serverRows = makeServersRows(serverArray);

  //From the array we got on the function above, we can iterate through
  serverRows.forEach(function(serverRow) {
    //We just append the rows to the section we created above
     hostSection.append(serverRow);
  });

  //Finally we append the host filled with the server rows to the main body
  document.body.append(hostSection);
});

function makeServersRows(servers) {
  //Servers is an object, so we need to get it's keys again to iterate through it
  const serverKeys = Object.keys(servers);
  //We user map instead of forEach because we want to make a new array based on the values of the servers
  const serverRows = serverKeys.map(function(server) {
    //Create a new div
    let serverDiv = document.createElement("div");
    serverDiv.classList.add("vm");

    //Create a new header
    let serverHeader = document.createElement("h2");
    serverHeader.textContent = server;

    //Put them together
    serverDiv.append(serverHeader);

    //Return each div indiviually to an array outside the .map function
    return serverDiv;
  });

  //Once we have iterated through every server, we return the HTML we created as an array
  return serverRows;
}

Некоторые мысли по этому поводу:

• Я бы попробовал посмотреть, сможете ли вы переформатировать способ, которым ваш образец объектаструктурирован, сейчас у вас есть массив, в котором есть 1 и только один объект, в котором есть ключи для каждого хоста, почему бы не сделать это следующим образом:

  sample = {"host1.domain": {...}, "host2.domain": {...}}

• То же самое для серверов внутри каждого хоста

Я бы также рекомендовал изучить Object.keys , map и forEach чтобы увидеть причину этого ответа!