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

Solution 1

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.

Solution 2

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

Solution 3

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.

Solution 4

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

View more solutions

Comments

[mahesh]

Thank you very much for the reply but the problem with alert function is it displays alert with lat ang long1 undefined alert("lat: " + result.lat + "\n" + "long: " + result.long);

[mahesh]

Thank you very much for the reply but the problem with alert function is it displays alert with lat and long1 undefined alert("lat: " + result.lat + "\n" + "long: " + result.long);

[jAndy]

@mahesh: if you use the code that I suggested here, it won't be undefined (second example, callback).

[mahesh]

Thank you very much i made changes to code as you suggested its working fine once again thank you for your answer

[mahesh]

Thank you very much i made changes to code as you suggested its working fine once again thank you for your answer.

[mahesh]

Thank you very much i made changes to code as you suggested its working fine once again thank you for your answer