Getting undefined via ajax JSON

Question

when I check the log from Console using chrome browser, I keep getting sideType is undefined. It is not returning data to sideType variable.

when I put console.log(sideType); in the sideGroupData() function - it work fine without problem.

Code:

function sideGroupData(GroupID) {
    $.getJSON("group_data.php",{GroupID:GroupID}, function(j){
          return j;
     });
}

function reloadProduct(productID) {
   $.post("product.php", { productID:productID }, function(data)  {   
                var sideType = sideGroupData(123);
                console.log(sideType);
     });
}

reloadProduct(999);

score 1 · Answer 1 · answered Sep 22 '11 at 16:36

1

the sidegroupdata() function call will return immediately - it'll trigger the ajax request and keep on executing. That means sideType is being assigned a null value, because sideGroupData doesn't actually explicitly return anything after the ajax call section.

Is there any reason you're doing an ajax request WITHIN an ajax request? Wouldn't it make more sense to modify the product.php page to return a data structure containing both that product ID AND the 'sidegroupdata' included in a single response?

answered Sep 22 '11 at 16:36

Marc B

356,200
43
426
500

product.php contain bunch of HTML code output (eg: I could do: `$("#box").html(data);` via ajax response... so how can I return both data from single response? I thought of doing this in the PHP: `$data['output'] = "
title

"; $data['sidegroupdata'] = mysql_fetch_assoc($q); json_encode($data);` - would that be ok? – I'll-Be-Back Sep 22 '11 at 16:44
Yep. That's perfect. I always embed status information into json responses in systems I build, so there's an error/errormsg field as well to indicate that something went right/wrong - I *loathe* using http status codes to signal that sort of thing. – Marc B Sep 22 '11 at 17:00

Jason · Accepted Answer · 2011-09-22T16:49:41.933

It's because you're running your call in a closure. The ajax call is being made asynchronously, which means that your code continues moving even though you're making an ajax call:

function setVar () {
    var retVal = 1;
    $.ajax(..., function(data){
        retVal = data; //retVal does NOT equal data yet, it's still waiting
    });
    return retVal; //will return 1 every time because code doesn't wait for ajax
}

var someVar = setVar(); // will be 1

If you want to return that value, include a callback function to run when the data is returned, and run it with the data supplied, like so:

function sideGroupData(GroupID, callback){
    $.getJSON('group_data.php', {GroupID: GroupID}, callback);
}

function reloadProduct(productID) {
   $.post("product.php", { productID:productID }, function(data)  {   
            sideGroupData(123, function(sideType){
                console.log(sideType);
        });    
    });
}

or, just make the call inside the function itself:

function reloadProduct(productID, groupId) {
   var prod, sideType;
   $.post("product.php", { productID:productID }, function(data)  {   
        prod = data;
        $.getJSON('group_data.php', {GroupID: groupId}, function(json){
            sideType = json;
            // you now have access to both 'prod' and 'sideType', do work here
        });
   });
}

Thank you very much for great examples. I think I understood much better now.. Do you know any good websites that explain more how does asynchronously/function work? thanks! — I'll-Be-Back, Sep 22 '11 at 17:06
see [this question](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) and accepted answer — Jason, Sep 22 '11 at 17:11
sorry, i meant, see the accepted answer on the question i linked to for a further explanation. thank you for accepting my answer, though :) — Jason, Sep 22 '11 at 17:21

Getting undefined via ajax JSON

2 Answers2

title