Can not get value from JSON object

Question

I'm having trouble getting the data value from JSON object. Here is my code:

var ab_id = $( "#ab_id" ).val();
$.ajax({
    type: 'GET',
    contentType: 'application/json',
    url: 'edit_account.php',
    data: {ab_id:ab_id, u_id:u_id},
    success: function(data) 
    {
        alert(data.ab_name);        
    },

});

When I do alert(data) , I got the actual data like this:

{    
     "ab_id":"7",
     "ab_name":"Lily's Storage Address",
     "ab_ship_name":"LIly C\/O SELF STORAGE",
     "ab_addr_1":"C\/O Lily",
     "ab_addr_2":"16 PIUMA AVENUE, UNIT #2",
     "ab_city":"CERI",          
     "ab_state":"CA",
     "ab_postal":"90700",
     "ab_phone":null,
     "ab_default":"0",
     "ab_is_storage":"1"
}

However, when I retrieve the data value by using data.ab_name , it returns undefined.

Am I missing something here?

Answer 1

Use bracket notation

alert(data['ab_name']);

for reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 2

Parse your string to a object

data = JSON.parse(data);
 alert(data.ab_name);