List delay

Ionic Framework ionic-v3
1

Hi everebody, i have recently created my first app in ionic, this application consumes google apis for geolocation and distance compare, everything works fine but for some reason i’m having a delay while updating the ion-items.

The sequence of my code is:

  1. Consume my own webservice.
  2. Fill the list collection.
  3. Update data of every item of the collection inside method getDistanceMatrix (google apis)

Log inside getdistanceMatrix method’s shows that every item is updated almost inmediatly, but ionic takes too log to refresh list.

The code:

let me = this;
    this.geolocation.getCurrentPosition().then(value =>{
      let position = value;

      for(let x = 0; x < me.packages.length; x++){
        console.log('Iteration');
        let service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
          origins: [new google.maps.LatLng(position.coords.latitude, position.coords.longitude)],
          destinations: [new google.maps.LatLng(me.packages[x].packageOriginLatitude, me.packages[x].packageOriginLongitude)],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, (response, status) => {
          if (status == 'OK') {

            let json_response = JSON.stringify(response);
            let googleMtr : googleMatrix = JSON.parse(json_response);            
            for(let i = 0; i < googleMtr.rows[0].elements.length; i++){
              me.packages[x].packageDistanceKms = googleMtr.rows[0].elements[i].distance.text;
            }
            console.log('Element updated package: '+x+' distance: '+me.packages[x].packageDistanceKms);
          }
          if (x == me.packages.length -1)
            me.loadfinished = true;

          me.packageCollection = me.packages.slice(0);

        });
      }
    });
2

Load behavior changed for better throw these refactor. I think also was a good idea to wrap getDistancMatrix’s callback function with a Promise.


   
/*  ------------------------------------- Metodos asincronicos -----------------------------------  */



async getPosition() {
  let position = await this.geolocation.getCurrentPosition();
  return position;
}

/*  ------------------------------------- Metodos asincronicos -----------------------------------  */

  async calculateDistance(){

    let position = await this.getPosition();
    let service = new google.maps.DistanceMatrixService();
    let parameters : any;
    for(let i  = 0; i < this.packages.length; i++){
      parameters = {
        origins: [new google.maps.LatLng(position.coords.latitude, position.coords.longitude)],
        destinations: [new google.maps.LatLng(this.packages[i].packageOriginLatitude, this.packages[i].packageOriginLongitude)],
        travelMode: 'DRIVING',
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
      };

      let prom = new Promise((resolve, reject) => {
        service.getDistanceMatrix(parameters , (response, status) => {
        if (status == 'OK') {
          let json_response = JSON.stringify(response);
          let googleMtr : googleMatrix = JSON.parse(json_response);
          let text = '';
          for(let i = 0; i < googleMtr.rows[0].elements.length; i++)
            text = googleMtr.rows[0].elements[i].distance.text;
          resolve(text);
        }
        });
      });

      prom.then(data => {
        this.packages[i].packageDistanceKms = data;
      });
      
    }
    this.loadfinished = true;

  }