Execute command only after the for - Javascript ends

Question

Execute command only after the for - Javascript ends

Navigation

#1 by (0 votes)

1

I need to get the distance traveled by a vehicle in the last 3 days and display it on the chart. For this, I make a for and I'm calculating the distance covered and saving in an array (arrayKmDayData) :

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

After filling this array with the distance of 3 days, display them on the chart:

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

The problem is that before I even finish the for , my script is already calling the display part of the graph, ie it runs the for the first time and already displays the graph, then executes the for for the second time and redisplays the graph and finally executes for for the 3rd time and displays the graph again.

How do I display the chart only after the forex has ended?

Follow 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
      ];

Thanks for any help.

javascript angularjs

asked by anonymous 06.12.2015 / 19:17

1 answer

How to write in the sublime text? "Rain of images" effect in CSS3, JQuery or JavaScript. How to make?

score 0 · Accepted Answer

The problem is that you are feeding the chart before the data is retrieved. The correct thing would be to feed the data into the chart only when the promises were resolved. If you are using a promises library, 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 promises library, 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
           ];
        }
    });

  }