将JSON渲染到动态HTML表

Question

我已经收到了一些JSON

我被要求在动态HTML表中显示此内容，JSON的“ u_status_information”部分可能具有其他不同的变量名，因此表头需要基于每条消息接收的内容。

我需要使用JavaScript来实现。

他们希望表格如下所示。

我已经开始专注于数据提取（在HTML渲染之前），并且已经设法使用下面的代码段获取顶级标题和值，但是对于“ u_status_information”部分，它意外地返回了“ [对象，对象]，[对象，对象]，[对象，对象]”。

我需要怎么做才能进入那部分数据？

这是我的尝试

var statInfo = [{
  "u_equipment_type": "MSS",
  "u_equipment_reference": "M1/1234A",
  "u_status_time": "2019-01-22 15:30:00",
  "u_status_information": [{
    "status_name": "amber_flasher_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "aspect_failed",
    "status_value": "FAULTY",
    "status_additional_info": "30"
  }, {
    "status_name": "some_other_fault",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }]
}, {
  "u_equipment_type": "MSS",
  "u_equipment_reference": "M1/1234A",
  "u_status_time": "2019-01-22 15:35:00",
  "u_status_information": [{
    "status_name": "amber_flasher_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "aspect_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "some_other_fault",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }]
}]

// EXTRACT VALUE FOR HTML HEADER.
var vals = [];
for (var i = 0; i < statInfo.length; i++) {
  for (var key in statInfo[i]) {
    if (vals.indexOf(key) === -1) {
      vals.push(key);
      gs.print(key);
    }
  }
}

for (var i = 0; i < statInfo.length; i++) {
  for (var j = 0; j < vals.length; j++) {
    gs.print(statInfo[i][vals[j]]);
  }
}

Answer 1

这是一个开始：

正在进行中：http://jsfiddle.net/mplungjan/m7Lg1yt8/

var statInfo = [{
  "u_equipment_type": "MSS",
  "u_equipment_reference": "M1/1234A",
  "u_status_time": "2019-01-22 15:30:00",
  "u_status_information": [{
    "status_name": "amber_flasher_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "aspect_failed",
    "status_value": "FAULTY",
    "status_additional_info": "30"
  }, {
    "status_name": "some_other_fault",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }]
}, {
  "u_equipment_type": "MSS",
  "u_equipment_reference": "M1/1234A",
  "u_status_time": "2019-01-22 15:35:00",
  "u_status_information": [{
    "status_name": "amber_flasher_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "aspect_failed",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }, {
    "status_name": "some_other_fault",
    "status_value": "HEALTHY",
    "status_additional_info": ""
  }]
}]

// EXTRACT VALUE FOR HTML HEADER.
var thd = document.getElementById("th"), trh = document.createElement("tr"), td;

Object.keys(statInfo[0]).forEach(function(outerKey) {
  if (typeof statInfo[0][outerKey] == "object") {
    Object.keys(statInfo[0][outerKey][0]).forEach(function(key) {
      th = document.createElement("th");
      th.className="sub";
      th.textContent=key;
      trh.appendChild(th);
    })
  }
  else {
    th = document.createElement("th");
    th.textContent=outerKey;
    trh.appendChild(th);
  }
});
thd.appendChild(trh)

th { border: 1px solid black; padding:3px }
td { border: 1px solid black; padding:3px }
.sub { color:red}

<table>
  <thead id="th"></thead>
  <tbody id="tb"></tbody>
</table>