Run command only after the end of for - Javascript

Question

I need to take the distance covered by a vehicle in the last 3 days and display on the chart. For this, I make a for and I calculate the distance traveled and saving in a array (arrayKmDayData):

 arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));

After you fill this array at a distance of 3 days, I display them on the chart:

      $scope.labels = arrayKmDayLabel,
      $scope.data = [
        arrayKmDayData
      ];

The problem is that before we even finish the for, my script is already calling the part to display the chart, ie it runs for the first time and already displays the chart, then runs the for for the second time and re-displays the chart and last, runs the for for the 3rd time and displays the chart again.

How to view the chart only after finishing?

Follows the code:

for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
      arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));

    });

  }

      $scope.labels = arrayKmDayLabel,
      $scope.data = [
        arrayKmDayData
      ];

I appreciate any help.

Answer 1

The problem is that you are feeding the chart before the data is recovered. The correct thing would be to feed the data into the graph only when the files were solved. If you are using a library of files, you can do it as follows:

var proms = [];
for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
       arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));
    });

    proms.push(promise);
}

Promise.all(proms)
.then(function() {
  // valores são lançados apenas quando todos os promises são resolvidos
  $scope.labels = arrayKmDayLabel,
  $scope.data = [
    arrayKmDayData
  ];
});

if you are not using a library of files, then it is best to use a counter.

var counter = 0;
for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
        arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));
        counter++;
        if (counter===3) {
           $scope.labels = arrayKmDayLabel,
           $scope.data = [
             arrayKmDayData
           ];
        }
    });

  }