Search code examples
jqueryjsonajaxdom-eventsgetjson

$.getJSON returning "undefined" values, data reads [object Object]

Thanks in advance for your help. I'm new to JSON and I've been trying to use $.getJSON to fill some form fields with no luck.

I started chopping pieces out until I was left simply testing my response from the server (my server is providing JSON when the URL listed below is viewed in a browser):

$(document).ready(function(){
    $('#button').live('click', function(){
        $.getJSON('http://localhost:8000/core/api/master-assembly/16', function(data) { 
        // alert(data); // uncomment for debug
           $('#showdata').html("<p>item1="+data.afAgeCounter+" item2="+data.afWordCounter+" item3="+data.idNumber+"</p>");
        });
    });
});

My JSON data looks something like:

{"success":true,"data":{"afWordCounter":123,"afAgeCounter":456,"idNumber":789, ...

When I run this script, I get the output:

item1=undefined item2=undefined item3=undefined

If I uncomment the

alert(data);

all I get in return is [object Object]

So what gives here?

Solution

  • The data you're returning doesn't have a afAgeCounter, etc. property. It has a data property that has those.

    You need to get that data property first.

    if(data.success){
    data = data.data;
    $('#showdata').html("<p>item1="+data.afAgeCounter+" item2="+data.afWordCounter+" item3="+data.idNumber+"</p>");
}