如何為從服務器接收的json創建動態表

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檔案：

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，輸出

如何為從服務器接收的json創建動態表

問題描述

1 個解決方案

解決方案1
0 2018-02-08 15:01:07

如何為從服務器接收的json創建動態表

問題描述

1 個解決方案

解決方案1 0 2018-02-08 15:01:07

解決方案1
0 2018-02-08 15:01:07