Handling JSON Object With jQuery?

Question

I'm having trouble handling a JSON object that I'm getting back from an AJAX request.

It's a simple flat JSON object, and all I want to do is write the responses back onto the page.

Can anyone point out how to loop over these objects and output the values? I just keep getting [undefined] or [object] written

Code here:

$.ajax({  
          type: "POST",  
          url: "func/chatResponse.php",  
          data: dataString,  
          success: function() {  
            $.getJSON('func/chatResponse.php?a=jsonLatest', function(data) {
                $.each(data, function(index) {
                    //items.push('<li id="' + key + '">' + val + '</li>');
                    $('body').append('<li id="' + data.user + '">' + data.user + '</li>');
                    alert(data);
                 });
            });
            alert("done");
          }  
        });

JSON sample here

[
    {"user":"someguy","message":"my message","timestamp":"2011-04-19 17:26:09"},
    {"user":"Cheyne","message":"Hey There ...  Nice site","timestamp":"2011-04-19 17:26:09"}
]

I love stackoverflow, I got multiple answers within minutes. thanks guys — Cheyne
– Cheyne, Commented Apr 20, 2011 at 1:49

David Tang · Accepted Answer · 2011-04-20 01:24:25Z

12

data is the array, while you want the items inside the array.

$.each doesn't change data to become the items, instead it passes individual items as the second parameter to the function you supply:

$.each(data, function (index, item) {
    // Use item in here
    $('body').append('<li id="' + item.user + '">' + item.user + '</li>');
});

Alternatively, you can use data[index]:

$.each(data, function (index) {
    // use data[index] in here
    $('body').append('<li id="' + data[index].user + '">' + data[index].user + '</li>');
});

By the way, avoid ugly string concatenation with:

$('<li>', {id: item.user, text: item.user}).appendTo('body');

answered Apr 20, 2011 at 1:24

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

4 Comments

Cheyne Over a year ago

Awesome, thanks for this. Although im getting the error: Uncaught SyntaxError: Unexpected identifier on the body.append line. Any ideas ?

David Tang Over a year ago

@Cheyne, can you paste the exact line that you have?

Cheyne Over a year ago

$.each(data, function(index) alert(data[index].user); });

Cheyne Over a year ago

Wait , i was missing a brace... Fixed it now.. thanks for your help!

Ry- · Accepted Answer · 2011-04-20 01:26:14Z

0

What you want is

                 $.each(data, function(index) {
                    //items.push('<li id="' + key + '">' + val + '</li>');
                    $('body').append('<li id="' + data[index].user + '">' + data[index].user + '</li>');
                    alert(data);
                 });

answered Apr 20, 2011 at 1:26

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

2 Comments

brad Over a year ago

$.each passes in the item in the array (data[index]) as a second param to your function, so you don't need to access it like that.

Ry- Over a year ago

I don't know much jQuery, I was just stating the obvious here :) But it looks like there are much better solutions, so...

Collectives™ on Stack Overflow

Handling JSON Object With jQuery?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related