以HTML表格格式获取JSON数据

Question

这是我的代码，我正在尝试从API提取JSON数据。

数据已成功提取，但不是表格式的。 它以连续的水平字符串形式出现。

if (this.readyState == 4 && this.status == 200) {
   // Typical action to be performed when the document is ready:
var respoTxt = xhttp.responseText;
var myObj = JSON.parse(respoTxt); 
document.getElementById("demo").innerHTML = '<table><tr><thead>' + 
myObj["dataset"]["column_names"][5] + '</thead><thead>' + myObj["dataset"]
["column_names"][6] + '</thead></tr>';
myObj["dataset"]["data"].forEach(function(p, i) {
//Below is 1st code version:
// var tr = document.createElement("tr");
// document.getElementById("demo").appendChild(tr);
// var td1 = document.createElement("td");
// tr.appendChild(td1);
// var td2 = document.createElement("td");
// tr.appendChild(td2);
// td1.innerHTML = myObj["dataset"]["data"][i][5];
// td2.innerHTML = myObj["dataset"]["data"][i][6];

document.getElementById("demo").innerHTML += '<tr>';
document.getElementById("demo").innerHTML += '<td>' + myObj["dataset"]
["data"][i][5] + '</td>';
document.getElementById("demo").innerHTML += '<td>' + myObj["dataset"]
["data"][i][6] + '</td>';
document.getElementById("demo").innerHTML += '</tr>';

//Here's the 3rd code version:
// document.getElementById("demo").innerHTML += '<tr><td>' + 
myObj["dataset"]["data"][i][5] + '</td><td>' + myObj["dataset"]["data"][i]
[6] + '</td></tr>';
});
document.getElementById("demo").innerHTML += '</table>';
}

我在内部使用了3种不同类型的代码（其中2种在活动代码的上方和下方的注释中标记）。

他们都没有以表格格式显示数据。

这是Codepen 。

Answer 1

一点点修改您的代码。

请按以下方式使用

document.getElementById("demo").innerHTML = '<table><thead><tr><th>' + 
myObj["dataset"]["column_names"][5] + '</th><th>' + myObj["dataset"]
["column_names"][6] + '</th></tr></thead>';   

Answer 2

问题在于，当您设置元素的innerHTML时，浏览器会自动关闭所有未打开的标签，因为它必须解析您分配为完整HTML的内容。 因此，您不能在单独的分配中连接开始标记，内容和结束标记。

解决方案是在构建时将所有HTML分配给一个字符串变量，然后在最后将其分配给.innerHTML 。 这也更加有效，因为它不必继续解析HTML。

 if (this.readyState == 4 && this.status == 200) { // Typical action to be performed when the document is ready: var respoTxt = xhttp.responseText; var myObj = JSON.parse(respoTxt); var html = '<table><tr><thead>' + myObj["dataset"]["column_names"][5] + '</thead><thead>' + myObj["dataset"] ["column_names"][6] + '</thead></tr>'; myObj["dataset"]["data"].forEach(function(p, i) { html += '<tr>'; html += '<td>' + myObj["dataset"] ["data"][i][5] + '</td>'; html += '<td>' + myObj["dataset"] ["data"][i][6] + '</td>'; html += '</tr>'; }); html += '</table>'; document.getElementById('demo').innerHTML = html; }