javascript - 如何使用innerHTML显示对象的所有内容

Question

这是我正在使用的代码，我遇到了麻烦，如果有人告诉我如何做到这一点，我将非常感激。

var student = {
name: "Dave ",
grades: [80, 85, 90 ,95]
};

for (prop_value_name in student ) {
document.getElementById("x").innerHTML= student;
}

<p id="x"></p>

Answer 1

您需要将该对象转换为字符串。您可以使用 JSON.stringify 来执行此操作。另外，当你像以前一样循环时，你会覆盖你之前放在那里的内容。它最终只会显示最后一个解析的属性。使用时JSON.parse您可以传递第三个缩进参数。当输出多行带有空格的文本时，您可以使用 <pre>预格式化文本的标记。

示例:

var student = {
  name: "Dave ",
  grades: [80, 85, 90 ,95]
};

document.getElementById("x").innerText = JSON.stringify(student, null, 2);

document.getElementById("y").innerText = Object.keys(student)
  .reduce((a, k) => {
    if (student[k] instanceof Array) {
      // If property is array use different format
      a += student[k].join(" ");
    } else {
      a += student[k];
    }
    return a;
  }, "");

<pre id="x"></pre>
<div id="y"></div>