如何解决json数据for循环

Question

for (var key in data) {
     $(".chat").html('<li class=" left clearfix message "></li>');
     $(".message").html(data[key].message);
}

响应数据

[{"id":1,"message":"message 3","taker_id":"124","giver_id":"102","status":"0","stamp":"2016-08-24"},

{" id ": 5,"消息":"消息2","taker_id":"124","giver_id":"102","状态":"0","邮票":"2016-08-17"},{"id":6，"message":"这是新的消息测试服务，现在我们可以了"，"taker_id":"124"，"giver_id":"102"，"status":"0"、"邮票":"2016-08-11"}]

输出

<li class=" left clearfix message ">This is the new message test service now we are ok</li>

问题:html

不单独生成

Please Help !

Answer 1

使用html()，您只是在每次迭代中替换内容。你需要添加

var resp = [{
  "id": 1,
  "message": "message 3",
  "taker_id": "124",
  "giver_id": "102",
  "status": "0",
  "stamp": "2016-08-24"
}, {
  "id": 5,
  "message": "message 2",
  "taker_id": "124",
  "giver_id": "102",
  "status": "0",
  "stamp": "2016-08-17"
}, {
  "id": 6,
  "message": "This is the new message test service now we are ok",
  "taker_id": "124",
  "giver_id": "102",
  "status": "0",
  "stamp": "2016-08-11"
}]
resp.forEach(function(obj) {
  $(".chat").append('<li class="left clearfix message ">' + obj.message + '</li>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="chat"></ul>

如果您真的不想在字符串中包含文本，那么您需要这样做:

resp.forEach(function(obj) {
  var li = $('<li class="left clearfix message "></li>');
  li.text(obj.message);
  $(".chat").append(li);
});