以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; }