开发者

Passing json array into jquery

开发者 https://www.devze.com 2023-04-03 16:14 出处:网络
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.

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'>开发者_StackOverflow社区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?


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.


Try removing the inner $.each and doing:


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


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"}]]
0

精彩评论

暂无评论...
验证码 换一张
取 消