Why can’t I access variable inside a nested function?

So I have been using the geolocation to find the user location and then find the distance to it and a csv list of locations. I want to save the distance to the json object, but can’t access it in my nested function.

function onLocationFound(e) {
    console.log(e);
    L.marker([e.latitude, e.longitude], {icon: home_marker}).bindPopup("You are here!").addTo(m);
    console.log(typeof(e.latitude));
    console.log(typeof(e.longitude));
    $.get('vac_sites.csv', function (csvString) {

        var data = Papa.parse(csvString, { header: true, dynamicTyping: true }).data;
        console.log(data)
        for (let i = 0; i < data.length; i++) {
        //get distance and then use dynamic variable names, make them into js objects, then store in dic with distance
          var row = data[i];
          console.log(row)
          var myRoute = L.Routing.osrmv1({
            serviceUrl: 'https://xxx.xxx.xxx:443/route/v1'
          });
          var self_loc = new L.Routing.Waypoint;
          self_loc.latLng = L.latLng([e.latitude, e.longitude]);
          var site_loc = new L.Routing.Waypoint;
          site_loc.latLng = L.latLng([row.Latitude, row.Longitude]);
          myRoute.route([self_loc, site_loc], function(err, routes) {
              distance = routes[0].summary.totalDistance;
              console.log('routing distance: ' + distance);
              row.distance = distance
              console.log(row)
          });

When I open the console, it appears to have created a new json object and added row to it. How can I access the original row variable and add the distance to it? Is it a problem with function scope?

EDIT: When I open console I get this for the first console.log(row):

...
{Name: "Cate Pharmacy", Address: "500 N Missouri Ave, Corning, Arkansas", Telephone: "(870) 857-6766", Website: "<a href="https://www.catepharmacy.com/" target="_b…ow noopener noreferrer">www.catepharmacy.com/</a>", Latitude: 36.4155144, …}
...

I want to add a key and value pair for this that is the distance of the route in the form distance: xxxxx. Desired result is:

...
{Name: "Cate Pharmacy", Address: "500 N Missouri Ave, Corning, Arkansas", Telephone: "(870) 857-6766", Website: "<a href="https://www.catepharmacy.com/" target="_b…ow noopener noreferrer">www.catepharmacy.com/</a>", Latitude: 36.4155144, distance: xxxxxx, …}
...

But instead at the second console.log(row) I get this:

{Name: null, distance: 265184.8}

Answer

Talking on the chat we solved the problem.

It was narrowed down to changing var row; to let row;

It sounds like row is leaked into your function somehow. You should read this to understand the differences between the two variable declaration keywords. In a nutshell, var is bound to the immediate function body while let is bound to the immediate closing block. That could be what caused it. Otherwise, I don’t know.

It’s best to use let because var is almost always unnecessary and can cause problems.

Advertisement

Answer