javascript variable scope WordPress

John Buchmann comments:

I think you may be onto something, but I don't understand what to do next.

But check this out... i think it will shed more light on the problem. The alert at the bottom of the code returns "0":



var places = [];

var addresses = ["233 Ferndale Lane, Downingtown, pa", "304 Heritage Place, Downingtown, PA"];


for (var i = 0; i <= addresses.length -1; i++) {

geocoder.geocode(geocoderRequest, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places.push(results[0].geometry.location);
}
});
alert (places.length); //returns 0
}




But if I take out some of the Google Map code, then the alert at the bottom returns "2" (which is good)



var places = [];

var addresses = ["233 Ferndale Lane, Downingtown, pa", "304 Heritage Place, Downingtown, PA"];


for (var i = 0; i <= addresses.length -1; i++) {

//geocoder.geocode(geocoderRequest, function(results, status) {
//if (status == google.maps.GeocoderStatus.OK) {
places.push("some text");
//}
//});
alert (places.length); //returns 2
}


So do you know any way to make it work while keeping the Google Map code? (I'm going to change the reward to $15 since it's more complex than I thought)

John Cotton comments:

I'm definitely onto something....but then I have been doing this for nearly 20 years :)

It's all to do with asynchronous calls - or what you might call AJAX. Put simply, AJAX works in the background and doesn't prevent the foreground code from executing. That is mostly a good thing, but in your case, it's a bad thing!

In you last example above, you commented out the geocode request and - importantly - the function that gets call on a response from the Google server - that's why "it works".

As I said before, what you need to do is structure your code differently - to react to the final response from the server.

What is below is crude, but will work:


var places = [];
var addresses = ["233 Ferndale Lane, Downingtown, pa", "304 Heritage Place, Downingtown, PA"];

for (var i = 0; i <= addresses.length -1; i++) {
geocoder.geocode(geocoderRequest, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places.push("some text");
}

if(i == (addresses.length - 1)) the_wait_is_over();
});
}

function the_wait_is_over() {
alert (places.length); // Now we're talking!
}


Clearly, you can play with the "if i" line to do other things if you wish.

John Buchmann comments:

I think we're close!... but the the_wait_is_over() function is never getting fired.

John Cotton comments:

Apologies, it might not be - for exactly the same reason! (It's late and I need to go to bed!!)

Try this:


var places = [];
var addresses = ["233 Ferndale Lane, Downingtown, pa", "304 Heritage Place, Downingtown, PA"];
var geocoder = new google.maps.Geocoder();
var response_count = 0;
for (var i = 0; i <= addresses.length -1; i++) {

geocoder.geocode({'address': addresses[i]}, function(results, status) {
response_count++;

if (status == google.maps.GeocoderStatus.OK) {
places.push("some text");
}

the_wait_is_over();
});

}

function the_wait_is_over() {
if( response_count == addresses.length ) {
// We're finished
alert ('the wait really is over! - '+places.length);
// Remember that places.length might not be the same as addresses if Google returns an error

}
}



John Buchmann comments:

That does seem to work! But this means that the array can only be used inside the "the_wait_is_over()" function, right? Is there no way to have the array accessible in other places?

John Cotton comments:

<blockquote>But this means that the array can only be used inside the "the_wait_is_over()" function, right?</blockquote>

No! It means you just have to wait for the geo-coding to finish.

You need to structure your code so either that it is more event driven, or you have tests before executing code. The former is much more desirable, you just have to think a little more.

Whatever you want to do once the geo-coding is done needs to go in a function (the_wait_is_over or another more specialised one) that gets called from the_wait_is_over. Simple!

The point is that your code cannot go on executing straight after the for loop because the geocoding hasn't finished. But the new function you have now knows when it is and so you code can react then.

John Buchmann comments:

Thanks John. I've awarded you the full prize money. :)