put array element value in 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>

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

Arun P Johny · Accepted Answer · 2015-07-06 05:48:04Z

9

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>

edited Jul 6, 2015 at 5:48

answered Jul 6, 2015 at 5:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

guradio Over a year ago

Is there a way to make it more flexible i mean i have other span i want to make like this.

Arun P Johny Over a year ago

@Pekka there could be if you can explain your requirement - if possible edit this fiddle to recreate your problem

guradio Over a year ago

jsfiddle.net/95g4b32k/3 then i want to put the value on each span that i added address for span with id address contact for span with id contact

Arun P Johny Over a year ago

@Pekka in that case using a each loop will be better

guradio Over a year ago

Yes like my code my only problem is how to put multiple values inside one span

Balachandran · Accepted Answer · 2015-07-06 05:43:19Z

3

use append()

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

DEMO

edited Jul 6, 2015 at 5:43

answered Jul 6, 2015 at 5:39

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

1 Comment

Jaromanda X Over a year ago

that wont be multi line though

hungndv · Accepted Answer · 2015-07-06 05:41:06Z

1

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

Hope this helps.

answered Jul 6, 2015 at 5:41

hungndv

2,1562 gold badges19 silver badges20 bronze badges

Comments

Nikhil Batra · Accepted Answer · 2015-07-06 05:41:56Z

1

//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);

answered Jul 6, 2015 at 5:41

Nikhil Batra

3,14816 silver badges20 bronze badges

Collectives™ on Stack Overflow

put array element value in span jquery

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related