How to fetch multiple return values from a JavaScript function

Question

I have JavaScript function call to changeMapLocation function where in it I want to return the variables lat and long1. I have some problem in code to return those two variables and alert in function call.

var sample = changeMapLocation(state);
alert(sample.lat1);
alert(sample.lat2); 

function changeMapLocation(state) {
   var addressval=state;
   var address;
   var url;
   var googleUrl= "http://maps.google.com/maps/api/geocode/json?";
   var  sensor  = "&sensor=false";

   if(addressval != null && addressval !="" && addressval.length!=0) {

      address = "address="+encodeURIComponent(addressval);

      $.ajax({
        url:googleUrl+address+sensor,
        type:"POST",
        dataType:"json",
        success:function(longlatJson) {
           var jsonObj = JSON.parse(JSON.stringify(longlatJson));
           var lat = jsonObj.results[0].geometry.location.lat;
           var long1 = jsonObj.results[0].geometry.location.lng;
           alert(lat);
           alert(long1);
           //var latlng = new google.maps.LatLng(lat,long1);
           //alert(latlng);
        },
        error:function(){alert("unable to conect to google server");}
      });
   }
   return(lat1:lat,lat2:long1); 
}

Answer 1

You can only return a single value. That value can be an object, but the syntax uses {} not ().

And Asynchronous JavaScript and XML is Asynchronous. As far as the calling function is concerned, it is fire and forget, you don't get to return a value from it.

Your callback has to complete the task, it can't give the data back to something else to complete it.

Answer 2

To return multiple values, you need to create an object.

return({
   lat1:  lat,
   lat2:  long1
});

Beside that, this code would not work either since $.ajax() creates an asychronous request, which fires later than your return statement does.

So you need to invoke your own callback. like

function changeMapLocation(state, cb){
    $.ajax({
         // much data
         success: function(longlatJson) {
             // do a lot of things
             if(typeof cb === 'function')
                cb.apply(null, [lat, long1]);
         }
    });
}

and then call it like

changeMapLocation("foobar", function(lat, long1){
     alert(lat);
     alert(long1);
});

Answer 3

You have a bigger problem in there. You are calling the asynchronous $.ajax() method, where its callback function will be called after your changeMapLocation() function returns, and therefore your function will not work as you are expecting. Follow the comments in the example below:

function changeMapLocation(state) {
   var lat;
   var long1;
   // Since the $.ajax() method is using the asynchronous XMLHttpRequest, it 
   // will not block execution, and will return immediately after it is called,
   // without waiting for the server to respond.
   $.ajax({
      url: 'url-here',
      type: 'POST',
      success: function(longlatJson) {
         // The code here will be executed only when the server returns
         // a response to the ajax request. This may happen several 
         // milliseconds after $.ajax() is called.
         var jsonObj = JSON.parse(JSON.stringify(longlatJson));
         lat = jsonObj.results[0].geometry.location.lat;
         long1 = jsonObj.results[0].geometry.location.lng;
         // Now lat and long1 are set, but it is too late. Our 
         // changeMapLocation() function will have already returned.
      }
   });
   // This part will be reached before the server responds to the asynchronous
   // request above. Therefore the changeMapLocation() function returns an  
   // object with two properties lat1 and lat2 with an undefined value.
   return {lat1: lat, lat2: long1};
}

You should consider refactoring your code in such a way that the logic to handle the ajax response is in the success callback. Example:

function changeMapLocation(state) {
   $.ajax({
      url: 'url-here',
      type: 'POST',
      success: function(longlatJson) {
         var jsonObj = JSON.parse(JSON.stringify(longlatJson));
         var lat = jsonObj.results[0].geometry.location.lat;
         var long1 = jsonObj.results[0].geometry.location.lng;

         // Update your map location in here, or call a helper function that
         // can handle it:
         myGoogleMap.setCenter(new google.maps.LatLng(lat, long1));
      }
   });
}

Note that changeMapLocation() does not return anything anymore. It will simply change the map location on its own, when the server responds to the Ajax request.

---

In addition note that your lat and long1 variables were enclosed in the scope of the success inner function, and couldn't be accessed from the outer function.

Answer 4

Wrap them both up in a single object and return that object:

var result = {
    lat:lat,
    long:long1
}

return result;

Then, in your function call:

var result = functionName();
alert("lat: " + result.lat + "\n" + "long: " + result.long);

Answer 5

Or the slightly longer version that is a little more readable

function getValues()
{
  var r = {};
  r.lat = 22;
  r.lat2 = 33;

  return r;
};


var x = getValues();
alert(x.lat);
alert(x.lat2);

Answer 6

As noted in other answers, with asynchronous call, you will not get the values immediately after your Ajax call since ajax call would not have completed. so you are getting the values as undefined. You have two options:

Option 1:

Move the operations you do with the return values of ajax into the success callback function of ajax call. See jAndy's or Daniel Vassallo's answer.

Option 2: (async: false)

You can make the call to be synchronous by setting the option async: false for ajax() function. Then this method would block until the response is received and when it completes, you will have the values initialized through Ajax.

with the second option, your code would look like:

function changeMapLocation(state) { 
//  var addressval = $("#address").val(); 
var addressval=state; 
var address; 
var url; 
var googleUrl= "http://maps.google.com/maps/api/geocode/json?"; 
var  sensor  = "&sensor=false"; 
var lat;
var long1;

if(addressval != null && addressval !="" && addressval.length!=0) { 

    address = "address="+encodeURIComponent(addressval); 

    $.ajax({ 
    url:googleUrl+address+sensor, 
    type:"POST",
    async: false, 
    dataType:"json", 
    success:function(longlatJson) { 

        var jsonObj = JSON.parse(JSON.stringify(longlatJson)); 
        lat = jsonObj.results[0].geometry.location.lat; 
        long1 = jsonObj.results[0].geometry.location.lng; 
        alert(lat); 
        alert(long1); 
        //var latlng = new google.maps.LatLng(lat,long1); 
        //alert(latlng); 

    }, 
    error:function(){alert("unable to conect to google server");} 
    }); 
} 
return {lat1:lat,lat2:long1}; 

}