javascript scope issue with jquery and ajax

Question

I have a function that makes a jQuery Ajax call to the BART api to get the series of next trains coming in. The function should return a string of the next train departures:

function getNextTrain(station)
{   
    var returnString = "";
    var title = station.title;

    $.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
            });
        // console.log(returnString);   
        }
    }); 
    return returnString;
 }

if I dump the string to the console just after the $(xml).find("estimate").each(... 's closing brace (currently commented out) - the string is correct:

-------------------<br>Train: BLUE<br>Direction: South<br>ETD: 4 minutes<br>------------`-------<br>Train: GREEN<br>Direction: South<br>ETD: 12 minutes<br>-------------------<br>Train: BLUE<br>Direction: South<br>ETD: 19 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 11 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 26 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 41 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 3 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 18 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 33 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 8 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 23 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 37 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 14 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 29 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 44 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 6 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 22 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 37 minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: Arrived minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: 15 minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: 30 minutes<br>`

but when I return it (or log it where the return statement is), I get an empty string. I tried: -declaring a global variable outside of the function -using the concat() function -returning at the point where I log the string successfully

No matter what I do, when I view the return value in the calling function, I get an empty string. I have been blocked for hours, and I don't know what I am doing wrong. I appreciate any help!

Mrchief · Accepted Answer · 2011-08-01 19:58:59Z

1

.success is not called immediately. It is called only when your Ajax request comes back succesfully. You need to have a global variable and set it from the success callback for it to work.

Better (since global variables are evil), use a callback:

function printListofStations(list) {
   console.log(returnString);  
}

function getNextTrain(station, printListofStations)
{   
    var returnString = "";
    var title = station.title;

    $.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
                printListofStations(returnString);
            });

        }
    }); 
 }

answered Aug 1, 2011 at 19:58

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

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

1 Comment

dcoffey3296 Over a year ago

Breaking it out into a callback worked beautifully and allowed me to keep the call asynchronous. Thank you for helping me to better understand how to use these tools!

ShankarSangoli · Accepted Answer · 2011-08-01 19:57:59Z

0

This is because ajax is async by default. You have to set async to false if you want to return something from this method.

$.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        async: false,
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
            });
        // console.log(returnString);   
        }
    });

answered Aug 1, 2011 at 19:57

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

3 Comments

dcoffey3296 Over a year ago

Yup, I feel like an idiot but that fixed it. Thank you very much!

Felix Kling Over a year ago

Using a synchronous is most of the time a bad idea.

ShankarSangoli Over a year ago

Yes that is true, using async to false stops the browser untill the response comes

Collectives™ on Stack Overflow

javascript scope issue with jquery and ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related