Multidimensional array returning undefined after verifying array in console

Question

I am working on a Google Maps API script but having trouble working with my arrays. The screenshot below shows my console.log statements from the code below. There are two arrays, they look exactly how I want them. I then console.log to verify the length (in this case 6). I then start a loop from 0 to 5 (6 minus 1). But the verify first console.log after than (markers[i][0]) returns TypeError: x[r] is undefined. I'm baffled by why I can clearly see the array directly above where I'm trying to extract a value.

if ($('#propertymap').length){
    var map=new google.maps.Map(document.getElementById('propertymap'), {
        center: {lat: 37.09024, lng: -95.712891},
        zoom: 5
    });
    var bounds=new google.maps.LatLngBounds();
    var geocoder=new google.maps.Geocoder();

    var id;
    var location;
    var street;
    var city;
    var state;
    var zip;
    var squarefootage;
    var ownedacreage;
    var leasedacreage;
    var hotelrooms;
    var website;

    var markers=[];
    var infocontent=[];

    $.post('/_getproperties.php', {task:'getproperties'}, function(result){
        var locationsSplit=result.replace('{', '').split('}');

        var i;
        for (i=0; i<locationsSplit.length-1; i++){
            var currentFields=locationsSplit[i].split('|');

            id=currentFields[0];
            location=currentFields[1];
            street=currentFields[2];
            city=currentFields[3];
            state=currentFields[4];
            zip=currentFields[5];
            squarefootage=currentFields[6];
            ownedacreage=currentFields[7];
            leasedacreage=currentFields[8];
            hotelrooms=currentFields[9];
            website=currentFields[10];

            geocodeAddress(location, street + ', ' + city + ', ' + state + ' ' + zip, location + '<br />' + street + '<br />' + city + ', ' + state + ' ' + zip, i);
        }

        console.log(markers);
        console.log(infocontent);
        console.log(locationsSplit.length-1);

        for (i=0; i<locationsSplit.length-1; i++){
            console.log(i);
            console.log(markers[i][0]);
        }
    });

    function geocodeAddress(locationtitle, locationaddress, locationdescription, i){
        geocoder.geocode({'address': locationaddress}, function(results, status){
            if (status==='OK'){
                markers[i]=[];
                markers[i][0]=locationtitle;
                markers[i][1]=results[0].geometry.location.lat();
                markers[i][2]=results[0].geometry.location.lng();

                infocontent[i]=[];
                infocontent[i][0]=locationdescription;
            } else {
                console.log('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
}

I do notice that if I add console.log(markers.length) I get "zero" returned. I don't understand how I can view the array but still get "zero" for its length. I'm sure that is related to my problem? — BB Design
– BB Design, Commented May 24, 2018 at 16:57
Maybe you should console.log('markers') before what you think you're logging just so you're sure. — dmgig
– dmgig, Commented May 24, 2018 at 16:57
I tried that. I see the entire array as shown in the screenshot above. But then I still get length=0. — BB Design
– BB Design, Commented May 24, 2018 at 16:59

Daniel Gimenez · Accepted Answer · 2018-05-24 17:02:39Z

2

geocoder.geocode appears to be an asyncronous operation. At the time the program goes through the first iteration of the for loop the markers and infoContent arrays aren't populated yet.

The reason you're seeing results in the console as populated arrays is because the items are objects, and by the time manage to expand them they've been populated with data. The console is not displaying the data as it was at the point in time you called console.log, instead it's displaying the content of the object as it is at this moment.

To verify this, instead of passing the markers instance to console.log, pass the stringified version by calling console.log(JSON.stringify(markers)). I bet it'll show an empty array instead.

answered May 24, 2018 at 17:02

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BB Design Over a year ago

Yes, you are correct. Perhaps this is a question for another post, but now I need to figure out how to wait until the asyncronous operations have all completed.

Daniel Gimenez Over a year ago

You can use Promise if you're not targeting older browsers.

BB Design Over a year ago

I think I can add a function call inside the geocode call, which will determine if the last call has been made, and then continuing processing from that point. Thanks for your help!

Collectives™ on Stack Overflow

Multidimensional array returning undefined after verifying array in console

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related