jQuery ajax() returning json object to another function on success causes error

Question

I got stuck in this problem for an hour. I am thinking this is something relates to variable scoping ? Anyway, here is the code :

function loadRoutes(from_city)
{
$.ajax(
{
    url: './ajax/loadRoutes.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType: 'json',
    data    :
    {
        "from_city" : from_city
    },
    error   : function(data)
    {
        console.log('error occured when trying to load routes');
    },
    success : function(data) 
    {
        console.log('routes loaded successfully.');
        $('#upperright').html("");  //reset upperright box to display nothing.

        return data;    //this line ruins all

        //this section works just fine.
        $.each(data.feedback, function(i, route)
        {
            console.log("route no. :" + i + " to_city : " + route.to_city + " price :" + route.price);
            doSomethingHere(i);             
        });
    }
});

}

The for each section works just fine inside the success callback region. I can see Firebug console outputs the route ids with no problem at all.

For decoupling purpose, I reckon it would be better to just return the data object, which in JSON format, to a variable in the caller function, like this:

//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);

$.ajax(
{
    url: './ajax/findFromCity.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType : 'json',
    data    :
    {
        "continent" : continent,
        "x"         : x,
        "y"         : y
    },
    error   : function(data)
    {
        console.log('error occured when trying to find the from city');
    },
    success : function(data) 
    {
        var cityname = data.from_city;

        //only query database if cityname was found
        if(cityname != 'undefined' && cityname != 'nowhere')     
        {
            console.log('from city found : ' + cityname);

            data = loadRoutes(cityname);

            console.log(data);
        }
    }
});
}

Then all of a sudden, everything stops working! Firebug console reports data object as "undefined"... hasn't that being assigned by the returning object from the method loadRoutes(cityname)?

Sorry my overall knowledge on javascript is quite limited, so now I am just like a "copycat" to work on my code in an amateur way.

Edited : Having seen Nick's hint, let me work on it now and see how it goes.

Edited 2nd :

bear with me, still stuck in this:

//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);

var cityname = "nowhere";   //variable initialized.

$.ajax(
{
    url: './ajax/findFromCity.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType : 'json',
    data    :
    {
        "continent" : continent,
        "x"         : x,
        "y"         : y
    },
    error   : function(data)
    {
        console.log('error occured when trying to find the from city');
    },
    success : function(data) 
    {
        cityname = data.from_city;

        //only query database if cityname was found
        if(cityname != 'undefined' && cityname != 'nowhere')     
        {
            console.log('from city found : ' + cityname);

            //data = loadRoutes(cityname);

            //console.log(data);
        }
    }
});

return cityname;  //return after ajax call finished.
}

Firebug console prints out something interesting :

nowhere
from city found : Sydney

I thought the order should be at least reversed like this :

from city found : Sydney
nowhere

So, basically, the variable defined in success region has a completely different scope from the same variable outside? This sounds bizarre to me at first but now I see it.

Still, don't know how to pass the json object out of the success callback to assign it to another variable...

Conclusion : okay, I got it, working on "pass by reference" to make use of side-effect to change a variable passed in by function parameter now... Which is not directly related to this question.

Nick Craver · Accepted Answer · 2010-03-25 01:37:39Z

9

The success callback occurs when the ajax call completes, so nothing is actually returned by your function, because that statement doesn't run until later.

In the AJAX scenario, you need to get the data object, then call what should run next, because any success or complete callback functions will happen after the code you're running, when the response from the server comes back.

answered Mar 25, 2010 at 1:37

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Michael Mao Over a year ago

@Nick Craver : changing the callback section name from "success" to "complete" in the caller function findFromCity(continent, x, y) would not resolve this problem. data is still recognized as "undefined".

Nick Craver Over a year ago

@Michael Mao - Correct, both of these happen later when the ajax request completes, I was trying to say neither do what you're after here...you need to call whatever you want to run in the success or complete function.

Michael Mao Over a year ago

@Nick Craver : sorry about my dumb head, tried to work out by returning the variable after $.ajax(); is finished, but still got incorrect response.

Buhake Sindi Over a year ago

And I thought that JQuery Ajax is quite easier. I guess I'll stick to XMLHttpRequest object. The Specs are easier to understand.

Nick Craver Over a year ago

@Michael Mao - Might be easier to understand by looking at how the order is happening, in your case it's $.ajax (request portion) return cityname; (undefined because success hasn't run to set it yet), any other code, then later when the server has responded with data, your success call is running, that make more sense?

|

Anthony Walsh · Accepted Answer · 2010-08-06 01:19:03Z

You could maybe try this method:

function loadRoutes(parameters)
{
    return $.ajax({
        type: "GET",
        async: false,  // This is important... please see ref below

        // Other Settings (don't forget the trailing comma after last setting)

        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('Error');
        }
    }).responseText;
}

So basically, '.responseText' is added to the '$.ajax' request and the request itself then becomes the return value.

Please note: This usage - returning the result of the call into a variable - requires a synchronous (blocking) request. So use 'async:false' in the settings.

To return a JSON value you could use:

return $.parseJSON($.ajax({
    // Other settings here...
}).responseText);

For more info see: http://api.jquery.com/jQuery.ajax.

BenB · Accepted Answer · 2010-03-25 01:37:27Z

1

Might be a "data" scope problem.

In the second example, which data is which the json object returned, and which one is the one sent?

answered Mar 25, 2010 at 1:37

BenB

10.7k7 gold badges35 silver badges30 bronze badges

1 Comment

Michael Mao Over a year ago

@ BenB : the second code snippet is the caller function which calls the "loadRoutes(from_city)" ajax function, and awaits the returning json object from the callee.

Prason Ghimire · Accepted Answer · 2021-03-28 15:46:10Z

Directly returning from the ajax success or error element will show the undefined value if you are doing some assigment like :

response = loadRoutes(XXX); 
  console.log(response); // undefined

Instead you have to follow approach of assigning first and returning later. so above code will look something like :

function loadRoutes(from_city)
{
var responsedata;
$.ajax(
{
    url: './ajax/loadRoutes.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType: 'json',
    data    :
    {
        "from_city" : from_city
    },
    error   : function(data)
    {
        console.log('error occured when trying to load routes');
    },
    success : function(data) 
    {
        console.log('routes loaded successfully.');
        $('#upperright').html("");  //reset upperright box to display nothing.

        //return data;    //this line ruins all, change this to below line
        responsedata=data // asssigning first

        //this section works just fine.
        $.each(data.feedback, function(i, route)
        {
            console.log("route no. :" + i + " to_city : " + route.to_city + " price :" + route.price);
            doSomethingHere(i);             
        });
    }
});

return responsedata; //returning later
}

Collectives™ on Stack Overflow

jQuery ajax() returning json object to another function on success causes error

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related