Accessing JSON data in a Javascript variable

Question

It's embarrassing to have to ask, but I freely admit I'm an unseasoned Javascript developer, and I just can't figure this out. Hopefully, this will be dead simple for someone else, and I want to thank everyone here ahead of time for the help this site continually provides me.

A couple days ago, I asked this question, and am no longer getting that error. But I've run into a wall trying to actually access the data stored in the variable. My JSON looks like this:

[
    {"id":"1","name":"Bob","haircolor":"Brown"},
    {"id":"2","name":"Carol","haircolor":"Red"}
]

It's going into a variable like this:

var people=[];
$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    people.push(data);
});

Thanks to initializing people as an array, I no longer get any error messages. But I can't access the contents of people, either. people.length returns a 0, and people[0] and people[1] are undefined.

It's there, I know it's all there, but I'm having a devil of a time figuring out where.

Is your script returning application/json as the response MIME type? — tadman
– tadman, Commented Jan 29, 2013 at 17:43
Using Firebug or a similar tool, can you verify that the browser is actually receiving the desired JSON? — dgvid
– dgvid, Commented Jan 29, 2013 at 17:44
You wouldn't happen to be using people right after the ajax call would you? — Musa
– Musa, Commented Jan 29, 2013 at 17:44
Probably a duplicate: stackoverflow.com/questions/3302702/… , also relevant stackoverflow.com/questions/2942544/… — user166390
– user166390, Commented Jan 29, 2013 at 17:48

Naftali · Accepted Answer · 2013-01-29 18:10:26Z

2

people only gets values after the ajax event happens.

Call some callback function after you put the data into the people array.

edited Jan 29, 2013 at 18:10

answered Jan 29, 2013 at 17:51

Naftali

147k41 gold badges247 silver badges304 bronze badges

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

Comments

Jai · Accepted Answer · 2013-01-29 17:52:33Z

1

Try with this: http://jsfiddle.net/hUq7k/

$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    $.each(data, function(i, people){
       console.log(people.id); //<------this should output "1, 2"
    });
});

make sure you are getting the response data.

answered Jan 29, 2013 at 17:52

Jai

74.8k12 gold badges76 silver badges104 bronze badges

2 Comments

Damon Kaswell Over a year ago

This was it! And it's so simple, too. I'm embarrassed at having to ask it in the first place. Thank you so much!

Damon Kaswell Over a year ago

It worked very well, and gave me some ideas on easier debugging, too. I only recently learned about console.log(), and it has a lot of really wonderful uses.

dgvid · Accepted Answer · 2013-01-29 17:51:40Z

The following should work, if the server is actually returning the expected JSON:

$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    var people = data;
    alert("people.length: " + people.length);
    if (people.length > 0) {
        alert("people[0].id: " + people[0].id);
    }
});

The following should not work, i.e., people will be undefined, because $.getJSON is an asynchronous method and this code is attempting to access people before the AJAX operation has completed.

var people;
$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    people = data;
});

alert("people.length: " + people.length);
if (people.length > 0) {
    alert("people[0].id: " + people[0].id);
}

Collectives™ on Stack Overflow

Accessing JSON data in a Javascript variable

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related