javascript scope issue with jquery and ajax

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 bra开发者_StackOverflow中文版ce (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!

.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);
            });

        }
    }); 
 }

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);   
        }
    });