Javascript length result different on Array

Question

I'm currently working with Google Maps API v3, with jQuery, and MarkerClusterer.

I note a weird problem with the "length" result. So, I'll show you my commented code:

The file data.json contains about 1800 objects.

function initialize() {

 $('#map_canvas').gmap({'zoom': 6, 'center': (new google.maps.LatLng(46.679594, 2.109375)), 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'disableDefaultUI':true}).bind('init', function(evt, map) { 


    var mstime = new Date().getTime(); // to avoid caching

    var markerslist = new Array(); // This array will gets points informations

    $.getJSON('data.json?'+mstime, function(data) {

        for (var i = 0; i < data.markers.length; i++) {
            var val = data.markers[i];

            var t =  new Object();
            t.lat =  val.lat; 
            t.lng =  val.lng;
            t.name = val.label;
            markerslist.push(t); // pushing point info in markerslist
        }

    });

    alert(markerslist.length); // This first alert returns "0" !
    alert(markerslist.length); // This new return the right count (about 1800). Weird!


    for( var i = 0; i < markerslist.length; i++ ) { // To create markers on map
        $('#map_canvas').gmap('addMarker', { 
            'position': new google.maps.LatLng(markerslist[i].lat, markerslist[i].lng) 
        }).click(function() {
            $('#map_canvas').gmap('openInfoWindow', { content : 'Hello world!' }, this);
        });
    }



    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));

 });


}

To sum up, this code works perfectly with at least one Alert... If a remove the two Alert, this code does not work.

Thank you for your help, Regards

Answer 1

The getJSON call is asynchronous. The result of that is the flow of execution proceeds after the call BEFORE the callback is called. You need to add any code that depends on the result of the call to the callback function rather than place it after the call to getJSON.

NOTE: for the code sample I just copied your code and moved it around. Now that you know that all the code needs to be in the callback, I'm sure you'll be able to optimize it to remove the need for the temporary array.

$.getJSON('data.json?'+mstime, function(data) {

    for (var i = 0; i < data.markers.length; i++) {
        var val = data.markers[i];

        var t =  new Object();
        t.lat =  val.lat; 
        t.lng =  val.lng;
        t.name = val.label;
        markerslist.push(t); // pushing point info in markerslist
    }

    alert(markerslist.length); // it will be correct here

    // now do the rest

    for( var i = 0; i < markerslist.length; i++ ) { // To create markers on map
        $('#map_canvas').gmap('addMarker', { 
           'position': new google.maps.LatLng(markerslist[i].lat, markerslist[i].lng) 
        }).click(function() {
           $('#map_canvas').gmap('openInfoWindow', { content : 'Hello world!' }, this);
        });
    }

    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
}); // and finally close the callback