CODEWITHSUNDEEP
javascriptjquery
guradio
guradio

Reputation: 15555

put array element value in span jquery

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>

In above i want to put the names in the array inside the span but what is happening is only one name is shown the last one. Meaning the names is overriden how can i iterate the name so all can be shown

I want it to look like

John Smith
James Harden

Upvotes: 5

Views: 2089

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is using .text() will override the previous value with new one, you need to keep appending the value to the previous one.

So one solution is to create an array of cname then use .join() to generate the desired output html and use .html() to set the content

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>

Upvotes: 9

Balachandran
Balachandran

Reputation: 9637

use append()

  $('#name').append(element.cname+"<br>");

DEMO

Upvotes: 3

Nikhil Batra
Nikhil Batra

Reputation: 3148

//Declare a variable
var data=""

$.each(data, function(item, element) {
//Append element to data variable.

  alert(element.cname);
  data+=element.cname;
});

//Append the entire data to the span at the end.
$('#name').append(data);

Upvotes: 1

hungndv
hungndv

Reputation: 2141

var str = '';
$.each(data, function (item, element) {
    str += element.cname + '<br />';
});
$('#name').html(str);

Hope this helps.

Upvotes: 1

Related Questions