Javascript 获取HTML表格式的JSON数据

这是我的代码，我试图从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>';
}

if（this.readyState==4&&this.status==200）{
//文件准备就绪时要执行的典型操作：
var respoTxt=xhttp.responseText；
var myObj=JSON.parse（respoTxt）；
document.getElementById（“demo”）.innerHTML=''+
myObj[“数据集”][“列名称”][5]+“”+myObj[“数据集”]
[“列名”][6]+''；
myObj[“数据集”][“数据”].forEach（函数（p，i）{
//以下是第一个代码版本：
//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[“数据集”][“数据”][i][5]；
//td2.innerHTML=myObj[“数据集”][“数据”][i][6]；
document.getElementById（“demo”）.innerHTML+=''；
document.getElementById（“demo”）.innerHTML+=''+myObj[“数据集”]
[“数据”][i][5]+''；
document.getElementById（“demo”）.innerHTML+=''+myObj[“数据集”]
[“数据”][i][6]+''；
document.getElementById（“demo”）.innerHTML+=''；
//以下是第三个代码版本：
//document.getElementById（“demo”）.innerHTML+=''+
myObj[“数据集”][“数据”][i][5]+''+myObj[“数据集”][“数据”][i]
[6] + '';
});
document.getElementById（“demo”）.innerHTML+=''；
}

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

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

---

下面是对代码的一点小小的修改

请按以下方式使用

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

document.getElementById（“demo”）.innerHTML=''+
myObj[“数据集”][“列名称”][5]+“”+myObj[“数据集”]
[“列名”][6]+''；

问题在于，当您设置元素的

innerHTML

时，浏览器会自动关闭任何未打开的标记，因为它必须解析您指定为完整HTML的内容。因此，不能在单独的指定中连接开始标记、内容和结束标记

解决方案是在构建字符串变量时将所有HTML分配给它，然后在最后将其分配给

.innerHTML

。这也更有效，因为它不必一直解析HTML

if（this.readyState==4&&this.status==200）{
//文件准备就绪时要执行的典型操作：
var respoTxt=xhttp.responseText；
var myObj=JSON.parse（respoTxt）；
var html=''+
myObj[“数据集”][“列名称”][5]+“”+myObj[“数据集”]
[“列名”][6]+''；
myObj[“数据集”][“数据”].forEach（函数（p，i）{
html+=''；
html+=''+myObj[“数据集”]
[“数据”][i][5]+''；
html+=''+myObj[“数据集”]
[“数据”][i][6]+''；
html+=''；
});
html+=''；
document.getElementById（'demo'）.innerHTML=html；
}

没能理解你。我应该在哪里使用它？好的，但是行数据仍然是字符串格式。您应该使用单个变量创建表，然后使用InnerHtmlInDemo将该变量附加到demo中，而不是将所有内容附加到

innerHTML

，将它们添加到临时字符串中，然后在末尾将其分配给

innerHTML

。@Barmar你是说在循环内部？就像分配一个var p=''；var q=''+myObj[“数据集”][“数据”][i][5]+''；var r=''；然后.innerHTML=p+q+r？我的意思是在循环之前

var html=''

，然后

html+='+…'在循环内，然后最后
.innerHTML=html最后。@Barmar非常感谢，它成功了！如果可能的话，我真的很想知道为什么它以这种方式工作，而不是直接添加到.innerHTML。里面发生了什么？在我的回答中解释完美！谢谢你，巴尔马。我在论坛上对这个问题做了很多研究，但是大多数答案都是jQuery格式的。希望这会对像我这样的JS爱好者有所帮助。