javascript 使用JS将对象从JSON响应传递到HTML

xytpbqjk 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(114)

success:function(result){
          $('#date').html(result.messages[0].date);
          $('#username').html(result.messages[0].username);
          $('#message').html(result.messages[0].message);
    }

这样我只得到对象0数据被显示在我的html页面上.同时result.messages已经3对象（0，1，2），可以有无限数量的对象.我怎么能获取所有对象一个接一个，并有其结果显示在我的html页面.
result.messages是一个JSON响应：

{"messages": [{"date": "2023-03-24T16:24:14.585Z", "username": "user_1", "message": "Hello"}, {"date": "2023-03-24T16:39:24.096Z", "username": "user_2", "message": "Hi"}, {"date": "2023-03-25T08:31:41.085Z", "username": "user_1", "message": "How are you?"}]}

JavaScript

来源：https://stackoverflow.com/questions/75850660/passing-objects-from-a-json-response-to-html-using-js

1条答案

按热度按时间

ego6inou1#

您可以使用Array.prototype.forEach（）方法迭代任何数组。
在本例中，需要迭代messages数组。
示例：

function display(result) {
  result.messages.forEach((msg) => {
    console.log(msg.date, msg.username, msg.message);
    // here is where you can display the messages on your HTML page
    const newMsg = document.createElement("div");

    newMsg.innerHTML = `${msg.date} - ${msg.username}: ${msg.message}`;

    document.body.appendChild(newMsg);
  });
}

display({
  "messages": [{
    "date": "2023-03-24T16:24:14.585Z",
    "username": "user_1",
    "message": "Hello"
  }, {
    "date": "2023-03-24T16:39:24.096Z",
    "username": "user_2",
    "message": "Hi"
  }, {
    "date": "2023-03-25T08:31:41.085Z",
    "username": "user_1",
    "message": "How are you?"
  }]
})

有关.forEach（）的更多信息，请查看MDN
希望我的回答对你有帮助：）

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 使用JS将对象从JSON响应传递到HTML

1条答案

相关问题

热门标签

最新问答