将 JSON 呈现为动态 HTML 表答案

【问题标题】：Render JSON to Dynamic HTML Table将 JSON 呈现为动态 HTML 表
【发布时间】：2019-01-24 15:25:53
【问题描述】：

我收到了一些 JSON

我被要求在动态 HTML 表格中显示此内容，JSON 的“u_status_information”部分可能有不同的附加变量名称，因此表格标题需要基于每条消息接收到的内容。

我需要使用 JavaScript 来做到这一点。

他们希望表格如下所示。

我已经开始专注于数据提取（在 HTML 中呈现之前）并且我已经设法使用下面的代码 sn-p 获取顶级标题和值，但是对于“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]]);
  }
}

【问题讨论】：

欢迎来到 Stackoverflow。请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并注明输入和预期输出。
对不起，我的错，到目前为止我还没有添加我的工作 - 主线程现在更新了

标签： javascript json html-table

【解决方案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>

【讨论】：