将JSON数据打印到innerHTML中变得不确定-[对象]

Question

大家好，我试图打印保存在数据库中的乐谱列表，香港专业教育学院将数据作为JSON数据获取（见下文）

我正在尝试使用以下代码打印“分数”数组中的所有每个对象

    function showScores() {
        var ourRequest = new XMLHttpRequest();
        var x, i = "";
        ourRequest.open('GET', '/allScores');
        ourRequest.onload = function() {
           var ourData = JSON.parse(ourRequest.responseText);
           for (i in ourData.scores) {
               x += ourData.scores[i] + "<br>";
           }
           document.getElementById("scoresList").innerHTML = x;
        };
        ourRequest.send();
    }

但是它打印出以下内容

感谢大家的帮助，谢谢大家

Answer 1

此行尝试将原始对象附加到您的HTML字符串：

x += ourData.scores[i]

JavaScript不能为您神奇地将其解析为HTML，因此仅输出[object Object]。

您需要从该对象的各个部分构建一个字符串，然后打印该字符串。例如：

请注意，您不应将for ... in与数组一起使用

ourData.scores.forEach(function (score) {
  x += `<p>[H] ${score.Home_Team} <b>${score.Home_Score}</b> - <b>${score.Away_Score}</b> ${score.Away_Team} [A]</p>`;
});

对于每个乐谱将输出以下内容：

  

[H]阿森纳 2 - 2 纽卡斯尔[A]

请确保在循环之前设置x = ""，否则字符串仍将以undefined开头。

---

如果您有兴趣：编写此循环的方式更简洁。例如使用Array.map()：

let x = ourData.scores.map(score => {
  return `<p>[H] ${score.Home_Team} <b>${score.Home_Score}</b> - <b>${score.Away_Score}</b> ${score.Away_Team} [A]</p>`;
}).join();

此表达式不需要预先初始化x。

Answer 2

您可以将元素创建为字符串，并可以连接整个数组并将其分配给innerHTML，如下所示。

您可以更改结构，例如在这里我对ul进行了更改，您可以创建表或任何格式。

请注意，如果您只想追加对象，由于无法使用JSON.stringify直接追加对象，因此无法将对象转换为字符串。

我希望这能解决您的问题。如果您还有其他问题，请告诉我。

var jsonObj = {scores: [{"Away_Score": 2, "Away_Team": "Newcastle", "Home_Score": 2, "Home_Team": "Arsenal"}, {"Away_Score": 2, "Away_Team": "Napoli", "Home_Score": 4, "Home_Team": "Liverpool"}]}

var html = jsonObj.scores.map(o => {
 return `<ul><li>${o.Away_Team}</li><li>${o.Away_Score}</li><li>${o.Home_Team}</li><li>${o.Home_Score}</li></ul>`
})

document.getElementById("todaysData").innerHTML = html.join("") 

<div id="todaysData">

</div>