1

I've written Javascript code to loop through an array including information about certain restaurants. When applicable, the loop checks the distance between the user's device and the restaurant, and modifies the restaurant's object in the array to include the known distance.

In the code below, we loop through the array, and if we determine that the restaurant is a chain (ie. it does not have coordinates available) we skip it. Otherwise, we determine the distance between the user's zip code and the known coordinates of the restaurant using the Google Maps Javascript API.

for (var i = 0; i < restaurantMetadata.length; i++) {
    console.log(i);
    var rst = restaurantMetadata[i];
    if (rst["chain"]) {} else {
        console.log("getting distance");
        var zip = window.localStorage.getItem("zipcode");
        var coords = new google.maps.LatLng(rstLat, rstLon);
        var distanceService = new google.maps.DistanceMatrixService;
        distanceService.getDistanceMatrix({
            origins: [zip],
            destinations: [coords],
            travelMode: "DRIVING"
        }, function(result) {
            restaurantMetadata[i]["distance"] = Math.round(((result.rows[0].elements[0].distance.value) / 1000) * 10)/10;
        });
            }
        } 
    }

The distance seems to be working fine, but I get an error after the result is recieved:

TypeError: restaurantMetadata[i] is undefined

Logging i to the console as seen on line 2 above shows 0 1 2 3 as it should, but later on, when I log it in the result body, it gets as high as four, but twice in a row. Is there a reason for this behavior? At first I thought it might be that i was somehow being changed, but I can't find any reason for that to happen.

Dave Chaplan
  • 30
  • 5
  • Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – Titus May 02 '20 at 18:26
  • @Titus I'm finding it difficult to implement solutions to that question in my specific case because I'm using a callback. – Dave Chaplan May 02 '20 at 19:41
  • The accepted answer of that question contains multiple solutions and all those solutions can be implemented in your case. The main idea is to create a closure (can be a function that receives the index as an argument, this was, inside that function, the index will remain the same). – Titus May 02 '20 at 19:59
  • Can you please provide a jsfiddle or jsbin so that we can reproduce your specific issue from our side and help further? – evan May 06 '20 at 07:08
  • @evan and for anybody else with a similar problem: it lies with the Maps Javascript API, which is poorly documented and honestly not greatly implemented. An answer that fixes the problem is [here](https://stackoverflow.com/a/32090909/13239834) – Dave Chaplan May 06 '20 at 16:28

0 Answers0