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

大家好，我试图打印保存在数据库中的乐谱列表，我将数据作为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();
    }

但是它正在打印以下内容



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

最佳答案

此行尝试将原始对象附加到您的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。

关于javascript - 将JSON数据打印到innerHTML中变得不确定-[对象]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53694329/