Cannot access variable in Javascript array. Console.log says undefined

Question

I have an object which contains an array that I then pass to another function in order for that function to use. The only thing is, when I go to access these variables, console.log says they are undefined. It's strange as when I log the whole array it ways the values are there but when I go to access the array element specifically, it returns undefined. Here is my code:

googleMapsFunctions.prototype.calculateDistances = function() {
        var that = this;    
        console.log(that.latLngArray);
        var closeClubs = [];
        var sortable = [];
        var resultsArray = [];
        jQuery(this.clubs).each(function(key, club) {
            var clubLatLng = new google.maps.LatLng(club.latitude, club.longitude);         
            var distanceFromLoc = clubLatLng.distanceFrom(that, "", "");        
            //alert(distanceFromLoc);
            //that.clubs[key].distance = distanceFromLoc;
            //closeClubs.push(club);
        });
        closeClubs.sort(function(a, b) {
            return a.distance - b.distance;
        });

    }

googleMapsFunctions.prototype.setLatLng = function() {
        var that = this;
        this.geocoder.geocode({'address' : this.location}, function(results, status) {
            if(status === "OK") {                   
                that.latLngArray.push(parseFloat(results[0].geometry.location.lat()));
                that.latLngArray.push(parseFloat(results[0].geometry.location.lng()));                  
            }               
        });
    }

//Client Code

var googleMapsClass = new googleMapsFunctions(JSONItems, searchTerm);
    googleMapsClass.setLatLng();        
    googleMapsClass.calculateDistances();

I am using console.log to print out the array (that.latLngArray) which gives the following:

enter image description here

I then click on the aray brackets and it takes me to the following (which is the correct information).

enter image description here

I just can't seem to access these variables and it says that they are undefined. Can anyone see what is happening here? Thanks

It's not clear from the code you posted, but it's most likely a problem involving code that expects an asynchronous operation to complete synchronously. — Pointy
– Pointy, Commented Sep 25, 2014 at 13:10
There is a Google maps geocode being called too. I'll add it to the code example. — James
– James, Commented Sep 25, 2014 at 13:13
Right, well there you go. The call to "setLatLng" will return immediately after initiating (but not completing) the Google API call. — Pointy
– Pointy, Commented Sep 25, 2014 at 13:14
You can use a Promise mechanism or else you can do the distance calculations in the callback to the geocode thing. Here is a lovely explanation of the simple yet super-handy Promise idea. — Pointy
– Pointy, Commented Sep 25, 2014 at 13:18

Pointy · Accepted Answer · 2014-09-25 13:44:46Z

Simplest thing to do would be to just move the distance calculation inside the callback:

googleMapsFunctions.prototype.setLatLng = function() {
    var that = this;
    this.geocoder.geocode({'address' : this.location}, function(results, status) {
        if(status === "OK") {                   
            that.latLngArray.push(parseFloat(results[0].geometry.location.lat()));
            that.latLngArray.push(parseFloat(results[0].geometry.location.lng()));
            // now it's safe to check the distances
            that.calculateDistances();
        }               
    });
}

Collectives™ on Stack Overflow

Cannot access variable in Javascript array. Console.log says undefined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related