jquery - How to display google distance matrix API response in grid cell per row?

Question

I want to display a grid with start and destination travel point with google distance matrix response value of the same. For this, I have GPS coordinates of origin and destination in the array. I am able to build the grid, and I am unable to fill the google distance in each row from the API callbacks.

var dataArray = [];

//Using Ajax request to get the result from DB.

success:function(data.d)
dataArray = data.d.slice();

//sample data set are : StartLatitude, StartLongitude, EndLatitude, EndLongitude, UserName, LoggedTime,etc..

Here i need to show the array as grid in web application, with a column representing the google distance for each distance traveled by the user

//Deferred execution is used here

GoogleDistance().then(LoadGrid);

//Get the distance of each record using google distance matrix API

var responseCount = [];
var GoogleDistance = function () {
     var defer = $.Deferred();
     var distanceService = new google.maps.DistanceMatrixService();
     responseCount = [];
     //dataArray => has the grid row details , which includes gps origin and destination info

    for (i = 0; i <= (dataArray.length - 1) ; i++) {
            distanceService.getDistanceMatrix(
            {
                origins: [{ lat: parseFloat(dataArray[i].StartLatitude), lng: parseFloat(dataArray[i].StartLongitude) }],
                destinations: [{ lat: parseFloat(dataArray[i].EndLatitude), lng: parseFloat(dataArray[i].EndLongitude) }],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.IMPERIAL,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    //validation
                } else {
                    if (origin == "") responseCount.push(0);
                    else if (destination == "") responseCount.push(0);
                    else if (response.rows[0].elements[0].status === "ZERO_RESULTS") responseCount.push(0);
                    else if (response.rows[0].elements[0].status === "NOT_FOUND") responseCount.push(0);
                    else {
                        var distance = response.rows[0].elements[0].distance;
                        var distance_text = distance.text;
                        responseCount.push(distance_text);
                    }
                }
            });

        }
        //to overcome asynchrounous execution and gather all API response 
        var tid = setInterval(ValidateGoogleResponseCount, 200);
        function ValidateGoogleResponseCount() {
            if (responseCount.length == dataArray.length) {
                //console.log("response ready");
                abortTimer();
                defer.resolve(); // When this fires, the code in a().then(/..../); is executed.
                return defer;
            }
        }
        function abortTimer() { // to be called when you want to stop the timer
            clearInterval(tid);
        }
        return defer;
    }

//Build Grid with Google distance response

var LoadGrid = function () {
var defer = $.Deferred();
var tableInfo = "";
$.each(selectedInfo, function (index, travelInfo) {
     tableInfo += '<tr class="tdInfo">' +
        '<td>' + travelInfo.StartPoint + '</td>'+
        '<td>' + travelInfo.EndPoint + '</td>'
        '<td class="text-center ActualDistance">' + responseCount[index] + 
'</td>' +
});
 defer.resolve();
 return defer;
};

I am able to get the response for all request and which is stored in an array responseCount. Order of coordinates used for API request is always same, but the order of response is different for different execution. So I am unable to bind the correct matching result in the grid cell.

Critical Issues are: JQuery Asynchronous execution, Google API Response order,

Answer 1

Waitting for answers