JSON to JQuery: What am I doing wrong?

Question

I'm fairly new to javascript and jquery development. I have a table of values I'm fetching in PHP and formatting as a JSON string, because JSON looks like a great way to get data into javascript. But I'm having trouble addressing the javascript variable.

The JSON data is in a very simple format. It looks like this:

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

And so on. None of the entries are complex. It's just flat rows of data.

I'm using $.getJSON() from JQuery to place the data in a variable like so:

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

According to console.log(data), the object 'data' is getting populated with the contents of my JSON string. But the push is generating these errors in the javascript console:

Uncaught TypeError: Cannot read property 'length' of undefined
Uncaught TypeError: Cannot call method 'push' of undefined

What am I missing? And is there any other information you need to help me on this? I've ground to a halt on this project because of this problem, and I'm just too much of a javascript newbie to figure it out.

Answer 1

The variable people must be an array. Change the first line to

var people = [];

At the moment "people" is just undefined and the .push() method only works on arrays.

Answer 2

If your PHP writes the output like this:

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

You need to assign that whole structure to people:

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

// note that you can't access anything inside people here
// only when the json has been processed