Passing json array into jquery

Question

Im having trouble formatting my json array in jquery and I cant seem to find a suitable answer.

I have a mysql database of users that is outputting thier user id and name in json format.

$result = mysql_query("SELECT id,info FROM users WHERE info like '$keyword%'");
while($row=mysql_fetch_assoc($result))
  $return[] = $row;

echo json_encode($return);

Resulting in this output:

[{"id":"1","info":"Mike"},{"id":"2","info":"Sally"},{"id":"3","info":"Ben"}]

my jquery success looks like this:

$.each(data, function()
{
  $.each(this, function(k, v) 
  {
    $('.results').append('<li id='+k+'>'+v+'</li>');
  });
});

resulting in this output:

<li id='id'>1</li>
<li id='info'>Mike</li>
<li id='id'>2</li>
<li id='info'>Sally</li>
etc...

But I would like it to read:

<li id='1'>Mike</li>
<li id='2'>Sally</li>
<li id='3'>Ben</li>

Ive been trying to wrap my brain around how to get this working but cant come up with anything, does anyone have any suggestions?

Matt · Accepted Answer · 2011-09-09 15:59:54Z

5

Try:

$.each(data, function() {
    $('.results').append('<li id="' + this.id + '">' + this.info + '</li>');  
});

However, DOM manipulation is slow, and whilst this won't be noticable for a small number of results, if you're adding a lot of <li>'s at the same time, you'll find the following code more efficient:

var str = '';
$.each(data, function() {
    str += '<li id="' + this.id + '">' + this.info + '</li>';  
});
$('.results').append(str);

Much easier than you thought, eh? :)

Edit: A brief description of why this works, and yours didn't:

What you've got is an array of objects. When you call $.each over data, it iterates through the array. Inside the callback function you pass to each, this is equal to the current element in the array; which is the object. So we access the id and the info attributes of the object (this.id and this.info), and build a <li> out of it.

answered Sep 9, 2011 at 15:59

Matt

75.4k26 gold badges156 silver badges181 bronze badges

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

2 Comments

Joel A. Villarreal Bertoldi Over a year ago

I got the same, just 10 seconds later, haha!

Joel A. Villarreal Bertoldi Over a year ago

I would +1 this again for proper explaining, alas I already up-voted this, hehe

Joel A. Villarreal Bertoldi · Accepted Answer · 2011-09-09 16:00:03Z

1

Try removing the inner $.each and doing:


$.each(data, function()
{
  $('.results').append('<li id='+this.id+'>'+this.info+'</li>');
});

answered Sep 9, 2011 at 16:00

Joel A. Villarreal Bertoldi

8,0478 gold badges37 silver badges51 bronze badges

1 Comment

Andrew Whitaker Over a year ago

I think you mean this and not data.

B.F. · Accepted Answer · 2013-04-16 07:35:01Z

0

Consider, an associative array from PHP is an object for JavaScript. Additionally, your JSON is absurd over sized. (indexed index)

var name=["Mike","Sally","Ben"];
for(var i=0;i<name.length;i++){//Yes, it has a length.
   $('.results').append('<li id='+i+'>'+name[i]+'</li>');
   }

would be enough. If you insist on your solution - you forgot some brackets.

[[{"id":"1","info":"Mike"}],[{"id":"2","info":"Sally"}],[{"id":"3","info":"Ben"}]]

answered Apr 16, 2013 at 7:35

B.F.

4776 silver badges9 bronze badges

Collectives™ on Stack Overflow

Passing json array into jquery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related