Asynchronous download and call back $.ajax

Question

I am having a problem with asynchronous $.ajax request. I am trying to download JSON data from restaurant-location.php and load the data into array locations. Then I need to iterrate through this array inside of initMap function. When I print array locations into the console i get undefined result. I assume that the problem is with a call back function but I just can't figure it out. Any help would be greatly appreciated!

var locations = []; 

window.onload = function downloadLocations() {
  $.ajax({
     type: "GET",
      url: '/restaurant-locations.php',
       success: function(data) {
          console.log(locations); //will print out the location array
          initMap(data)
       },
  });
} 
console.log(locations); //will NOT print out the location array

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(10,-10),
  zoom: 15

for ( var i = 0; i < locations.length; i++ ) {

    var street = locations[i].street;
    var city= locations[i].city;

more code ....

}

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&v=3&callback=initMap">
</script>

That's becase success function is not called until ajax is done executing on the other hand the console.log after onload function is called right away. By then locations has not being assigned a value! — Gacci, Feb 04 '17 at 22:55
ajax is **asynchronous**. Can't eat a pizza before it gets delivered — charlietfl, Feb 04 '17 at 23:06

R_Ice · Answer 1 · 2017-02-04T23:01:19.587

0

~~You are defining locations again in your callback~~(this you edited)

 success: function(data) {
      //!!!!!var locations = data;//do not do this
      //do this instead:
      locations = data;
      console.log(locations); //will print out the location array
      //and call initMap() here!!!
      initMap();
      //or better, just pass the result to initMap here:
      initMap(data); //and use the variable in your initMap function
   },

edited Feb 04 '17 at 23:01

answered Feb 04 '17 at 22:55

R_Ice

634
6
7

I'm no sure if I should call the initMap from inside of `success` function. I initialize the `initMap` with `async defer` at the end of my code. I added this code in my sample code on the bottom. Should I remove the `async defer` ? – Luke Feb 04 '17 at 23:39
I don't know about async defer, never use it. But I do know that if you need data from your ajax-call in your initMap function, you should call it in your success block. – R_Ice Feb 05 '17 at 00:33

score 0 · Answer 2 · answered Feb 04 '17 at 23:20

Your success callback will be called only after successful completion of ajax call while the console.log immediately after ajax call is executed after ajax request is sent (please note the ajax call is asynchronous and won't wait till completion to execute next statement after ajax.) So when the console log of location just after ajax method call won't have the location populated. Either move all code that you want to work with location data to inside of the success callback or make the ajax call synchronous using async:false in the parameter to ajax method.( Synchronous ajax method is not recommended though. I would suggest better move all the code that you want to work on location data to inside success callback)

Asynchronous download and call back $.ajax

2 Answers2