Unable to access a JSON object as I would expect

Question

I do an ajax call:

$.ajax({
        url: '/foo/getData',
        dataType: 'json',
        async: false,
        success: function(data){
            lat = data.project_x;
            lng = data.project_y;
            zoomin = parseInt(data.mapzoom);
            console.log(data);
        }
    });

and return:

[{"id":"3","project_x":"42.456","project_y":"-70.123","zoom":"7"},{"id":"3","project_x":"41.123","project_y":"-71.456","zoom":"7"}]

console.log(data) gives me:

Object 
id: "3"
project_x: "42.456"
project_y: "-70.123"

Yet when I try to assign these values to something I get undefined. Example: console.log(data.project_x);

returns undefined when I would expect it to return 42.456

What am I doing wrong here?

Answer 1

Since your result is an array you need to access the position you want, for example:

lat = data[0].project_x;

Or, depending on your needs, loop through the array and use each value...it's unclear from your code exactly what you're after, but the important part is the properties aren't on the object returned...they're on objects in the array that was returned.

A loop could look like:

$.each(data, function() {
   alert(this.project_x); //access properties off this
});