Adding property:value pairs from GooglemapsAPI to an existing json/javascript object

Question

I am trying to create a script that finds the closest store/location to a customer using googlemapsAPI. So I've got a json object which is a collection of store objects. Using Jquery's .each to iterate through that object, I am grabbing the driving time from the customer to each store. If it finds the directions, It copies the duration of the drive which is an object with the time in seconds and a human readable value. That appears to work, however when I try to sort through all of those store objects with the drivetime added, I cannot read the object copied from google. If I console.log the whole object, 'closest_store', It shows the values I'm looking for. When I try to read the values directly via closest_store.driveTime, Firebug is outputting undefined in the console. What am I missing here?

$.getJSON('<?php echo Url::base() ?>oldservices/get_locations', {}, function(data){
            $.each(data, function(index, value)
            {
                var end = data[index].address;

                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

                directionsService.route(request, function(response, status)
                {
                    //console.log(response);
                    if (status == google.maps.DirectionsStatus.OK)
                    {
                        value.driveTime = response.trips[0].routes[0].duration.value;
                        //console.log(response.trips[0].routes[0].duration.value);
                    };
                });


            });


            var closest_store;
            $.each(data, function(index, current_store)
            {
                if (index == 0)
                {
                    closest_store = current_store;
                }
                else if (current_store.driveTime.value < closest_store.driveTime.value)
                {
                    closest_store = value
                };
                console.log(current_store.driveTime);
            }
        )



        });

Answer 1

Why don't you just use value.address, rather than data[index].address ?

Answer 2

In your second $.each, I'm not sure what value is that the code is referencing. Try this approach instead:

Do this to set the value:

data[index].driveTime = response.trips[0].routes[0].duration.value;

Use this for your bottom loop:

var closest_store;
$.each(data, function(index, current_store) {
    if (index == 0) {
        closest_store = current_store;
    } else if (current_store.driveTime.value < closest_store.driveTime.value) {
        closest_store = current_store;
    };
    console.log(current_store.driveTime);
});

---

Update to fix async issue:

$.getJSON('<?php echo Url::base() ?>oldservices/get_locations', {}, function(data){
  var count = 0;
  $.each(data, function(index, value) {
    var end = data[index].address;
    var request = { 
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
    count++;
    directionsService.route(request, function(response, status) {
      count--;
      if (status == google.maps.DirectionsStatus.OK)
        value.driveTime = response.trips[0].routes[0].duration.value;
      if (count == 0)
        getClosestStore(data);
    });
  });
});


function getClosestStore(data) {
  var closest_store = data[0];
  $.each(data, function(index, current_store) {
    if (current_store.driveTime.value < closest_store.driveTime.value)
      closest_store = current_store;
  });
  //do something with closest_store
}

This counts up before sending a request, and as each request comes back, counts down...when we get back to 0 (last request coming back) it then runs the function that calculates the closest store.