Can't access object properties in jQuery AJAX call

Question

When I call this code:

console.log(data);
console.log(data.email);

I get this result:

{"userName":"2","email":"2","firstName":"2","lastName":"2","isAdmin":"0","isEnabled":"1"} index.php:162
undefined 

The first console.log(data); outputs correctly. Then, I want to access the email property of the data object, and to do so I use console.log(data.email); . However, as you can see above, it says that it's, "undefined."

Why can't I access this property (or any properties)? Note: I have also tried data['email'] which didn't work, either.

Answer 1

I didn't realize that jQuery doesn't auto-parse the returned JSON to an object. It was just a JSON string. To fix, I just had to do this:

data = JSON.parse(data);

Cross-browser:

data = $.parseJSON(data);

Answer 2

In my case, I could show the object by console.log, but I couldn't access any attribute for a simple thing: I wasn't realizing that my JSON was wrongly structured, as an array with one single object. Then I could access its attribute using a index.

console.log(data.email);

undefined

but then I tried...

console.log(data[0].email);

finallyhereismyattribute@json.com

I just fixed my model and it works perfectly. Thanks to my coleague Aaron Lil!

Answer 3

I have experienced the same issue. And to have it fixed, I needed to create new array and then put each values of the data object in that array by iterating "data" like the following:

var arrayTest = [];

$.each(data, function (index, value) {
    arrayTest["email"] = value.email;
    arrayTest["andsoforth"] = value.andsoforth;
    //etc...
});

// Now retrieve data by using arrayTest
console.log(arrayTest["email"]);