How to return a new object from a function?

Question

The function does the following:

1. Receives an XML document using AJAX.
2. Extracts relevant information from the document.
3. Dynamically turns it into an object using a for loop.

How do I get this object out of the function?

Sample Code:

XML File:

<root>
 <config>
 <station>Station_One</station>
 <station>Station_Two</station>
 <station>Station_Three</station>
 </config>
</root>

JS file with station coordinates:

var stations = {

  'Station_One': {
      lat: 78.782762
    , lng: 17.917843
    , name: 'Nowhere'
  },
  'Station_Two': {
      lat: -0.829439
    , lng: -91.112473
    , name: 'Isla Isabela'
  },
  'Station_Three': {
      lat: 15.066156
    , lng: -23.621399
    , name: 'Cape Verde'
  }

Script:

function addRoute() {
    xhr = createHttpRequest(); //This function returns an XMLHttpRequest()
    var url ="urlhere"; //pretend this is valid
                 xhr.onreadystatechange = function () {
                     if (xhr.readyState == 4 && xhr.status == 200) {
                     var doc = xhr.responseXML;
                     var routeStations={};
                     config=doc.getElementsByTagName("station");
                        for (i=0;config.length>i;i++) {
            //Successfully extracts station values and stores them in currentStation
                        var currentStation = config[i].childNodes[0].nodeValue;
            //currentStation is then used as a reference to find the values stored in the JS file
                            var lat = stations[currentStation].lat;
                            var lng = stations[currentStation].lng;
           //routeStations Object is created dynamically
                            routeStations[currentStation] = {lat: lat, lng: lng}
                        } //end for loop
           //alert(routeStations); routeStations object is created successfully
           // but will not be available beyond this point
           //return routeStations; did not work for me
                     } //end readyState && status

                 } // end onreadystatechange
                  xhr.open("GET",url,true);
                 xhr.send(null);
}

How do I make this object available to other functions?
To be more concrete, I want to reference this object from another function. I plan on using these coordinated to make a polyline using Google Maps API.

Note: This function is triggered by an onChange event, thus, a new object needs to be created on top of the existing one each time the event is triggered.

Answer 1

function onChangeEventListener(){
    addRoute(callbackRoute);
}



function callbackRoute(routeStations){
  ....
}



function addRoute(callback) {

   xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //many code to getting object
            callback(routeStations);
        }
   }

}