Question

我从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}
  }

Answer 1

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

这可能不是最佳解决方案，而是您如何完成任务的想法。

JS档案：

alias

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) {
// ----------------------------------------------    
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;
  // ----------------------------------------------   
  }

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

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

1 个答案: