JavaScript array length is showing 0

Question

I am facing a weird problem while dynamically fetching LatLng for an address using geocode. I have declared a global array for store the latLng values for the addresses. After storing data to that array when i console log the value of that array, it shows the values perfectly. But when i console log the value of that array length, it shows 0. Everything seems a little bit weird to me. Can't understand what is the exact problem in my code.

Here is the HTML code used to fetched all the location.

<div id="locations" class="col-sm-4">
        <fieldset>
        <legend class="section">Redemption Locations (<?php echo count($locations); ?>)</legend>
        <div id="stats_div" style="overflow-y: scroll; height: 335px;">
            <?php foreach($locations as $location): ?>
                <div class="stats" data-id="<?php echo $location->address; ?>">
                    <span class="stat">
                        <strong><?= $location->label ? $location->label : $location->name; ?></strong>
                        <br>
                        <?php echo $location->address; ?>
                        <br>
                        <?php echo $location->phone_number; ?>
                    </span>
                </div>
            <?php endforeach; ?>
        </div>
        </fieldset>
    </div>

The locations are looking like "25 Regina Street South, Waterloo, ON, Canada"

Here is the JS code for showing the map with location markers.

var geocoder;
var map;
var addresses = [];
/*var locations = [
    [43.4643342, -80.52126329999999],
    [43.6331368, -79.42370740000001]
];*/
var locations = [];

function getAddress() {
    var count = $("#locations").find(".stats").length;
    for (var i=0; i<count; i++)
        addresses.push($("#locations .stats:eq('"+i+"')").attr('data-id'));
}

function storeLatLng(lat, lng) {
    var newarr = [];
    newarr.push(lat, lng);
    locations.push(newarr);

    console.log('Array Length: '+locations.length);
}

function getLatLong() {
    getAddress();
    var i;
    geocoder = new google.maps.Geocoder();

    for (i in addresses) {
        var address = addresses[i];
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
                storeLatLng(lat, lng);
            }
        });
    }
}

function initializeMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: 53, lng: -92.220885},
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var
        bounds = new google.maps.LatLngBounds(),
        marker = '';

    getLatLong();

    console.log(locations);
    console.log(locations.length);

    for (var i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: {lat: locations[i][0], lng: locations[i][1]},
            map: map
        });

        bounds.extend(marker.position);
    }

    map.fitBounds(bounds);
}

$(document).ready(function(){
    initializeMap();
});

To check the value of the locations array, just put a console log before the loop and in the loop. output of locations array is perfect but the output of array length is 0. I can't understand why it's showing 0 as all the values of the array seem perfect to me. When i put the static value on that array(which is comment out in the code). It shows both the array values and the array length perfectly.

So, my problem is about global array named locations . If you guys check carefully, I have put console log three times in my code. One is in storeLatLng() and other two is in initializeMap(). In the storeLatLng() function, it prints value perfectly. In the initializeMap(), First console lg prints the values o the locations array. It seems perfect. But immediate after that line, when i console log the length of that array, it shows 0. or better understanding, i attach the console log screenshots.

@geocodezip, i have edited my question, Check if it's duplicate or not. I think my problem is different. — Saleh Ahmad Oyon, Nov 16 '16 at 05:17
It is a duplicate. The geocoder is asynchronous, you are processing the array **before** the asynchronous callback functions run (when it is empty). — geocodezip, Nov 16 '16 at 05:22
@geocodezip, Ok. One question arise in my mind. Then how it prints all the value of the array when i `console.log(locations);` ? — Saleh Ahmad Oyon, Nov 16 '16 at 05:29
When do you do the `console.log(locations)` that displays all the values? — geocodezip, Nov 16 '16 at 05:34
@geocodezip, in the `initializeMap()` function. I have put both `console.log(locations)` and `console.log(locations.length)`. `console.log(locations)` prints value perfectly. I have attached my console log screenshot with the updated question. — Saleh Ahmad Oyon, Nov 16 '16 at 05:42
You mean the one that says array length in initializeMap: 0? — geocodezip, Nov 16 '16 at 05:47
@geocodezip, yes. `console.log(locations)` shows all the values perfectly but `console.log(locations.length)` shows 0. — Saleh Ahmad Oyon, Nov 16 '16 at 05:50

JavaScript array length is showing 0

0 Answers0