使用JSON

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>"
}