javascript - 将 JSON 数据打印到 innerHTML 中未定义 - [对象]

Question

大家好，我正在尝试打印数据库中保存的分数列表，我得到了 JSON 数据形式的数据(见下文)

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

    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] Arsenal 2 - 2 Newcastle [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。