javascript - 将数组元素值放入 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>

在上面我想把名字放在跨度内的数组中，但发生的事情是只有一个名字显示在最后一个。意思是名称被覆盖了我如何迭代名称以便可以显示所有名称

我希望它看起来像

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>