如何为从服务器接收到的 json 创建动态表答案

【问题标题】：How to create a dynamic table for json received from server如何为从服务器接收到的 json 创建动态表
【发布时间】：2018-02-08 14:24:16
【问题描述】：

我从我的服务器链接的 ajax 调用中接收到这个 json 数据

[{"reportType":"Thyroid","age":21,"gender":"Female","onThyroxine":false,"onAntiThyroideMed":false,"sick":false,"pregnant":false,"recentThryoidSurgery":false,"lithium":false,"goitre":false,"tumor":false,"hypopituitary":false,"tsh":120.0,"t3":120.0,"i131Treatment":false,"tbg":123.0,"t4U":12.0,"tt4":23.0,"fti":11.0}]

我如何解析这些数据？并将其转换为 html 表格？

我的代码：

var obj, dbParam, xmlhttp, myObj, x, txt = "";  
obj = { "table":str, "limit":20 };
dbParam = JSON.stringify(obj); 
if (str == "") {
  document.getElementById("demo").innerHTML = "";
  return;
}
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText); //Giving error
    {body to create table}
  }

【问题讨论】：

如果你在处理响应的函数中console.log(this.responseText);，你会看到什么？
它以“未定义”@Archer 响应
你需要弄清楚为什么 AJAX 调用会得到一个未定义的响应。在你这样做之前，你无法走得更远。当您在浏览器中打开 URL 时会发生什么？
[{"reportType":"Thyroid","age":21,"gender":"Female","onThyroxine":false,"onAntiThyroideMed":false,"sick":false, “怀孕”：假，“最近的甲状腺手术”：假，“锂”：假，“甲状腺肿”：假，“肿瘤”：假，“垂体”：假，“i131Treatment”：假，“tbg”：123.0，“fti” ":11.0,"tsh":120.0,"t3":120.0,"tt4":23.0,"t4U":12.0}] 这是我直接访问 url 时得到的响应。 @Archer
好的 - 所以你的 AJAX 调用不正确。您至少需要发布打开请求的代码。

标签： javascript html json spring-mvc

【解决方案1】：

这很简单。这是一个如何做到这一点的示例（只需调整列名就可以了）。

这可能不是最好的解决方案，而是一个关于如何完成任务的想法。

JS 文件：

var obj, dbParam, xmlhttp, myObj, x, txt = "";  
obj = { "table":str, "limit":20 };
dbParam = JSON.stringify(obj); 
if (str == "") {
  document.getElementById("demo").innerHTML = "";
  return;
}
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
// ----------------------------------------------    
let response = JSON.parse(JSON.stringify([{"reportType":"Thyroid","age":21,"gender":"Female","onThyroxine":false,"onAntiThyroideMed":false,"sick":false,"pregnant":false,"recentThryoidSurgery":false,"lithium":false,"goitre":false,"tumor":false,"hypopituitary":false,"tsh":120.0,"t3":120.0,"i131Treatment":false,"tbg":123.0,"t4U":12.0,"tt4":23.0,"fti":11.0},{"reportType":"Thyroid","age":21,"gender":"Female","onThyroxine":false,"onAntiThyroideMed":false,"sick":false,"pregnant":false,"recentThryoidSurgery":false,"lithium":false,"goitre":false,"tumor":false,"hypopituitary":false,"tsh":120.0,"t3":120.0,"i131Treatment":false,"tbg":123.0,"t4U":12.0,"tt4":23.0,"fti":11.0}]));

    let htmlOutput = "<table border=2><tr><td>age</td><td>fti</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td><td>column name</td></tr>"

    for(let obj of response){
      console.log(obj);

      htmlOutput += "<tr>"; 

      for(let val in obj){
         //console.log(obj[val]);
         htmlOutput += "<td>"+obj[val]+"</td>"; 
      }

      htmlOutput += "</tr>"; 
    }
    htmlOutput += "</table>"; 

    console.log(htmlOutput);

    let tableContainer = document.getElementById("tableContainer");
    tableContainer.innerHTML = htmlOutput;
  // ----------------------------------------------   
  }

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="tableContainer"></div>
</body>
</html>

工作示例： https://jsbin.com/rosonotita/edit?html,js,output

【讨论】：