How to show data only when function is finish?

ionic-v1
1

Hi,

I’m creating an app which needs to execute several functions before displaying data on screen. The issue is sometimes no data appears on screen because it seems that it’s not waiting the execution of all tasks.

Actually, I need to do 6 steps

  • 1.Get User location
  • 2.Show Map
  • 3.Fetch Data From Firebase
    1. Fetch Second Data From API
    1. Put all data in new array
    1. sort Array Descending by date

Only after that, the app can display data into by Ngif

Sometimes, all working well but not all the time. Data don’t appear on screen even though I can well see data printed into my console.log

How can I force the interface () to wait all execution in my page.ts ?

Below my code for page.ts which I put in ngOnInit() {}

  const optionsGeolocalisation = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: Infinity
    }

	// 1.Get User location 
    this.geolocation.getCurrentPosition(optionsGeolocalisation)
.then((resp) => {

	// 2.Show Map
      this.showMap(resp.coords.latitude, resp.coords.longitude);
    
      this.userLatitude = resp.coords.latitude
      this.userLongitude = resp.coords.longitude
    
 

      // 3.Fetch Data From Firebase
      this.DBFirebase.collection("alertArray")
      .valueChanges()
      .subscribe(docs => {
        docs.forEach(doc => console.log(doc));
        docs.forEach(doc => this.allsArrayFinal.push(doc));
      });


      
     }).catch((error) => {
       console.log('Data from Firebase error : ', error);
     });

     // 4. Fetch Second Data From API

     this.readApi(url).subscribe((data) => {  
   
      this.alertsFromdApi = data;
  
  
      for (const [number, detail] of Object.entries(this.alertsFromBustedApi.alerts)
      
      
      ) 
      this.allsArrayFinal.push(detail)

    // 5. Put all data in new array 
      
      for (let alert of this.allsArrayFinal) {
  

        
        
        var newAlert : AlertInApp = {
    
         date : alert.date,
	  alertTitle : alert.alertTitle
       	
    
        };
    
        this.alertsArray.push(newAlert);
        this.addMarkersToMap(newAlert)
     
    
       }
  
       //6. sort Array Desending by date 
  
       this.alertsArray.sort((a,b) => 0 - (a.date > b.date ? 1 : -1) )
      this.dataAvailable = true
     
     });

Many thanks!!!

2

you need to manage your promises, async calls appropriately… see pseudo-code below

Get User location.then(( location )=>{
   Show Map
   return Fetch Data From Firebase
}).then(( results1 )=>{
   return * Fetch Second Data From API
}).then(( results2 )=>{
   Put all data in new array
   sort Array Descending by date
})
3

HI,

Many thanks.

I didn’t succeed to manage as you said but it gaves me the process.

I finally used async and await words. I put all my code inside a new function with the keyword “async” before and put the keyword “await” before each steps.

It seems working each time now.

Many thanks

async getAllData() {

const optionsGeolocalisation = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: Infinity
    }

	// 1.Get User location 
   await this.geolocation.getCurrentPosition(optionsGeolocalisation)
.then((resp) => {

	// 2.Show Map
      this.showMap(resp.coords.latitude, resp.coords.longitude);
    
      this.userLatitude = resp.coords.latitude
      this.userLongitude = resp.coords.longitude
    
 

      // 3.Fetch Data From Firebase
     await this.DBFirebase.collection("alertArray")
      .valueChanges()
      .subscribe(docs => {
        docs.forEach(doc => console.log(doc));
        docs.forEach(doc => this.allsArrayFinal.push(doc));
      });


      
     }).catch((error) => {
       console.log('Data from Firebase error : ', error);
     });

     // 4. Fetch Second Data From API

     Await this.readApi(url).subscribe((data) => {  
   
      this.alertsFromdApi = data;
  
  
      for (const [number, detail] of Object.entries(this.alertsFromBustedApi.alerts)
      
      
      ) 
      this.allsArrayFinal.push(detail)

    // 5. Put all data in new array 
      
     await for (let alert of this.allsArrayFinal) {
  

        
        
        var newAlert : AlertInApp = {
    
         date : alert.date,
	  alertTitle : alert.alertTitle
       	
    
        };
    
        this.alertsArray.push(newAlert);
        this.addMarkersToMap(newAlert)
     
    
       }
  
       //6. sort Array Desending by date 
  
       this.alertsArray.sort((a,b) => 0 - (a.date > b.date ? 1 : -1) )
      this.dataAvailable = true
     
     });


}