将数组元素值放在span jquery中

Question

var data = [{"id":"2015-07-003","cname":"John Smith ","caddress":"Tokyo,Japan","ccontact":"123"},{"id":"2015-07-003","cname":"James Harden","caddress":"Osaka Japan","ccontact":"345"}]



$.each(data, function(item, element) {
  alert(element.cname);
  $('#name').text(element.cname);
});


<span id='name'></span>

在上面我想把数组中的名字放在span中,但是发生了什么只是一个名字显示在最后一个.意思是名称被覆盖我如何迭代名称以便可以显示所有名称

我希望它看起来像

John Smith
James Harden

Answer 1

问题是使用.text()将使用新值覆盖以前的值,您需要继续将值附加到前一个值.

因此,一种解决方案是创建一个数组cname然后用于.join()生成所需的输出html并使用.html()来设置内容

var data = [{
  "id": "2015-07-003",
  "cname": "John Smith ",
  "caddress": "Tokyo,Japan",
  "ccontact": "123"
}, {
  "id": "2015-07-003",
  "cname": "James Harden",
  "caddress": "Osaka Japan",
  "ccontact": "345"
}]


$('#name').html($.map(data, function(item) {
  return item.cname
}).join('<br />'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id='name'></span>