ionic Async-await not working

Question

my code is:

async getDetails(){
  for(var i=0;i<this.results.length;i++){
      // this.booking.length=0;
      // this.hbl.length=0;
      var hblList=[];
      var bookingList=[];
      await this.api.get("track/dtl", 
      {
       loadPortId: this.results[i].loadPortId,
        dischargeId:this.results[i].dischargeId,
        scheduleId: this.results[i].scheduleId
      })
      .subscribe(res1 => {
        //let resp1 = res1;
        this.details= res1;
        bookingList.length=0;
        hblList.length=0;
        for(var j=0;j<this.details.length;j++){
          if(this.details[j].bookNo!== undefined){ 
            bookingList.push(this.details[j]);
           }else if(this.details[j].hblNo!== undefined){
            hblList.push(this.details[j]);
           }
         }
        //  this.results[i]["hbl"]=this.hbl;
        //   this.results[i]["booking"]=this.booking;
         console.log("this.hbl inside subscribe::::::::::::"+hblList);
        console.log("this.booking  inside subscribe::::::::::::"+bookingList);
        console.log("this.results[i]  after::::::::::::"+this.results[i]);
        });

        this.results[i]["hbl"]=hblList;
        this.results[i]["booking"]=bookingList;
        console.log("this.hbl after::::::::::::"+hblList);
        console.log("this.booking  after::::::::::::"+bookingList);
        console.log("this.results[i]  after::::::::::::"+this.results[i]);
        this.getCurrent(this.results[i].queries[0]);

    }

  }

I want to make async call for each for loop item. could anyone please help me to use async-await to make sure the first and every async call is completed prior to the next call. Thanks in advance

Answer 1

I have no means of trying your code or trying mine, but here, take a look at this one that should work in theory.

The main point is: you have to decide whether to use Observables or to use Promises. Unfortunately the Angular team decided to return Observables in their http module. Observables do not work with async await, but there is a simple conversion: Observable.prototype.toPromise(). Use that, and get rid of .subscribe.

async getDetails(){
    for(var i=0;i<this.results.length;i++){
        // this.booking.length=0;
        // this.hbl.length=0;
        var hblList=[];
        var bookingList=[];
        var res1 = await this.api.get("track/dtl", {
            loadPortId: this.results[i].loadPortId,
            dischargeId:this.results[i].dischargeId,
            scheduleId: this.results[i].scheduleId
        }).toPromise();

        this.details= res1;
        bookingList.length=0;
        hblList.length=0;
        for(var j=0;j<this.details.length;j++){
            if(this.details[j].bookNo!== undefined){ 
                bookingList.push(this.details[j]);
            } else if(this.details[j].hblNo!== undefined){
                hblList.push(this.details[j]);
            }
        }

        this.results[i]["hbl"] = hblList;
        this.results[i]["booking"] = bookingList;
        console.log("this.hbl after::::::::::::"+hblList);
        console.log("this.booking  after::::::::::::"+bookingList);
        console.log("this.results[i]  after::::::::::::"+this.results[i]);
        this.getCurrent(this.results[i].queries[0]);    
    }
}

Answer 2

As you are subscribing in the Observable you're not using the async/await approach. Async/await works only with Promises, so, you need to transform your observable to promise first.

I don't know how your this.api works, but, maybe, you should have a toPromise() function. Using await you won't need to subscribe or to use ".then()" promise function.