0

I have a function that includes a call to another function which returns a set of coordinates. However, when this function is called, it doesn't wait for the return of the coordinates, instead it continues, and when I try to print the returned value(an array), it is always undefined. How can force my code to wait for the return of the coordinates?

Where it's being called:

$('#arena-form').on('submit', function(e) {
    e.preventDefault();
    fullAddress = "80 Devon Street, Brantford, Ontario, Canada";

    var locationInfo = [];
    locationInfo = geocodeQuery(fullAddress); // calling the function that will return the coordinates

    console.log(locationInfo);

});

Function that Returns the Coordinates

function geocodeQuery(address) {
    if (!searchManager) {
      Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
      searchManager = new Microsoft.Maps.Search.SearchManager(map);
      geocodeQuery(address);
    });
    } else {
        var searchRequest = {
            where: address,
            callback: function (r) {
                if (r && r.results && r.results.length > 0) {
                    var locationInfo = [r.results[0].location.latitude, r.results[0].location.longitude];
                    return(locationInfo);
                }
            },
            errorCallback: function (e) {
                showModalAlert("danger", "location not found");
            }
        };

      //Make the geocode request.
      searchManager.geocode(searchRequest);
  }
}
ckorvee
  • 85
  • 1
  • 4
  • 15
  • Related Q&A: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jonathan Lonowski Nov 05 '19 at 03:27

1 Answers1

1

What you're dealing with is called Asynchronous Call, this simply means you have to wait until the a Promise is returned to proceed further with your work.

For jQuery, I think it's simple enough to use just Promise, but you should read up on this category because nowadays it becomes quite popular. (link is already provided in comment)

Your code should be look like this:

$('#arena-form').on('submit', function(e) {
    e.preventDefault();
    fullAddress = "80 Devon Street, Brantford, Ontario, Canada";

    const promised = new Promise(function(resolve, reject) {
      const locationInfo = geocodeQuery(fullAddress);

      if (!locationInfo) {
        return reject('Your reason')
      }

      return resolve(locationInfo)
    })
    

    promised
      .then(function(result) {
        console.log('Location info: ', result);
      })
      .catch(function(error) {
        console.log('Error: ', error)
      })

});
Duc Hong
  • 1,149
  • 1
  • 14
  • 24
  • I seem to get the same result with this. Instead of the "undefined" I was getting before, I now get, "Error: Your reason" which means I'm still getting the undefined error. I know the function is returning the correct value (I log it before returning), so it's still not waiting for the response. – ckorvee Nov 05 '19 at 03:46
  • actually the above snippet is just a sample for your reference, you should think of it as a structure for a promise-based, in your case you should log out your `locationInfo` value before `resolve`-ing. The `reject` is just in case the returned value is a falsy value (`undefined` or a error status code from server) – Duc Hong Nov 05 '19 at 05:50