使用JSON填充字段時的HTML / JS-表格式

Question

仍在學習HTTP格式，請耐心等待。 此頁面使用名字，並顯示所有具有相同名字的人。

http.onreadystatechange = function() {
    if (http.readyState == XMLHttpRequest.DONE) {
        console.log(http.responseText);
        var myObj = JSON.parse(http.responseText);
        console.log(myObj);
        txt += "<table border='1'>"
         for (x in myObj) {
            txt += "<tr><td>" + myObj[x].friend_id + "</td></tr>";
            txt += "<tr><td>" + myObj[x].birth_date + "</td></tr>";
            txt += "<tr><td>" + myObj[x].first_name + "</td></tr>";
            txt += "<tr><td>" + myObj[x].last_name + "</td></tr>";
            txt += "<tr><td>" + myObj[x].gender + "</td></tr>";
            txt += "<tr><td>" + myObj[x].phone+ "</td></tr>";
        }
        txt += "</table>" 
        document.getElementById("demo").innerHTML = txt;

    }
}

這是我的代碼-我發送了一個HTTP請求，接受了Response（包含JSON）並將其打印到頁面上。

JSON- https://imgur.com/a/pTMd9bW

但是，這是我嘗試顯示JSON代碼時頁面的外觀。

https://imgur.com/a/9X9BWH9

我該如何更改？ 我仍在學習格式設置，因此我不確定從JSON填充內容時如何解決此問題。

Answer 1

您正在為每個值創建一個新行（ <tr> ）。 相反，您應該為每個條目創建一次行。

for (x in myObj) {
    txt += "<tr>"
    txt += "<td>" + myObj[x].friend_id + "</td>";
    txt += "<td>" + myObj[x].birth_date + "</td>";
    txt += "<td>" + myObj[x].first_name + "</td>";
    txt += "<td>" + myObj[x].last_name + "</td>";
    txt += "<td>" + myObj[x].gender + "</td>";
    txt += "<td>" + myObj[x].phone+ "</td>";
    txt += "</tr>"
}