如何将 JS 数据转换为 HTML？

Question

我正在尝试将我的 JSON 数据着色为 HTML。所以我使用 JSON 数据并将其设置为变量。然后我分配了更多变量来访问 JSON 数据中我想要的每个元素的数据。现在，我有变量形式的数据，但我无法使用 document.getElementById 将其传递给 HTML。这可能是因为我对同一个变量有不同的数据，所以只有最后一个元素会打印出 Id，因为它是唯一的。所以，请帮助我如何将 JS 变量数据打印到 HTML 中。

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "welcome",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "Help me",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }
];

for (var i in obj) {
  var type = obj[i].type;

  var text = obj[i].text;

  var source_team = obj[i].source_team;

  var user_profile = obj[i].user_profile;

  var real_name = user_profile.real_name;


  console.log(source_team + " : " + real_name);

  console.log(text);

  document.getElementsByClassName('a1').innerHTML = text;

}

<h2>Convert a string written in JSON format, into a JavaScript object.</h2>

<p id="output"></p>
<p class="a1"></p>

Answer 1

这是一个如何将其放入简单表格的示例。通常，您可以使用.innerHTML 或.innerText 属性将项目动态添加到您的HTML：

var obj = [{
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "hey there",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "welcome",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  },
  {
    "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
    "type": "message",
    "text": "Help me",
    "source_team": "TN4AF0V5W",
    "team": "TN4AF0V5W",
    "user_profile": {
      "real_name": "marvelmohinish99",
      "team": "TN4AF0V5W"
    }
  }
];

for (var i in obj) {
  var type = obj[i].type;

  var text = obj[i].text;

  var source_team = obj[i].source_team;

  var user_profile = obj[i].user_profile;

  var real_name = user_profile.real_name;

	var message = document.createElement("tr");
  message.innerHTML =
  	"<td>" + type +
    "</td><td>" + text +
    "</td><td>" + source_team +
    "</td><td>" + user_profile +
		"</td><td>" + real_name + "</td>";

  document.getElementsByClassName('a1')[0].append(message);

}

table, th, td{
  border: 1px solid black;
}

<p id="output"></p>
<table class="a1">
  <th>Type</th>
  <th>Text</th>
  <th>Source Team</th>
  <th>User Profile</th>
  <th>Real Name</th>
</table>