how to get json using javascript?-CodePudding

json data example

{
  "CPU Running": {
    "user": "Yama/Rayno",
    "container": [
      "C-23-1",
      "C-24-1",
      "C-40-1"
    ]
  },
  "Nonstop CPU": {
    "user": "Kang/Yoon",
    "container": [
      "C-25-1",
      "C-26-1",
      "C-31-1",
      "C-32-1",
      "C-33-1",
      "C-34-1",
      "C-37-1",
      "C-38-1"
    ]
  }

i use this script but change ${data[i].job} row

for (i = 0; i < data.length; i  ) {
  if (data[i].container != null) {
    var add_data = `<tr>
      <td>
        ${data[i].container}
      </td>
      <td>
        ${data[i].user}
      </td>
      <td>
        ${data[i].job}
      </td>
    </tr>`;

how to output this format? CPU Running, Nonstop CPU as Job name what calling this space in json?

CodePudding user response：

First of all, you json data is incomplete. An additional } should be added at the end of your data.

I am not writing a full solution, rather showing how you can access your data. Getting CPU Running data, This is an object, containing another two fields: user and an list-container. So access the CPU-Running event like this:

var cpuRunner= yourJsonData["CPU Running"]; //assuming `yourJsonData` holds your json data
var cpuRunnerUser= cpuRunner["user"];
var containerList= cpuRunner["container"]; //this is your container list for cpu-running

Now, iterate on this containerList for your html for cpuRunning containers Similarly, you can get the container list for Nonstop CPU too

CodePudding user response：

inside of html page select place for your table, and add table style to css or just put in the html page header

 <p id="showData"></p>

and this is a javascript code

function CreateTableFromJSON(obj) {

  // CREATE DYNAMIC TABLE.
  var table = document.createElement("table");

  // ADD JSON DATA TO THE TABLE AS ROWS.
  iterateData(obj, table);

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

function iterateData(obj, table) {

  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === "object") {
      var tr = table.insertRow(-1);
      var tabCell1 = tr.insertCell(-1);

      if (key == "container") tabCell1.innerHTML = key;
      else {
        tabCell1.innerHTML = "Job";
        var tabCell2 = tr.insertCell(-1);
        tabCell2.innerHTML = key;
      }
      iterateData(obj[key], table);
    }

    tr = table.insertRow(-1);
    if (key == "user") {
      var tabCell1 = tr.insertCell(-1);
      tabCell1.innerHTML = key;
    }
    if (typeof obj[key] == "string") {
      var tabCell2 = tr.insertCell(-1);
      tabCell2.innerHTML = obj[key];
    }
  });
}