大家好,我正在尝试打印数据库中保存的分数列表,我得到了 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();
}
但是它打印出以下内容
非常感谢任何有关此问题的帮助,谢谢大家
最佳答案
此行尝试将原始对象附加到 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
。
关于javascript - 将 JSON 数据打印到 innerHTML 中未定义 - [对象],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53694329/