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?

Answer 1

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.