my question is very simple... Consider the following angular method:

fillOrderHeader() {
    let rows3:Array<OrderHeader>= new Array<OrderHeader>();
    this.orderService.getAllOrdersHeaders().subscribe(headerList=>{
      headerList.forEach(headerDoc=>{
        headerDoc.get().subscribe(header=>{
          let headerMetadata:OrderHeader= new OrderHeader();
          headerMetadata.clientName= header.data().clientName;
          headerMetadata.agencyName=header.data().agencyName;
          rows3.push(headerMetadata);
        });
      })
    });
    return rows3;
  }

How to await to subscription before to return a row3 array?

Many thanks!

my question is very simple... Consider the following angular method:

fillOrderHeader() {
    let rows3:Array<OrderHeader>= new Array<OrderHeader>();
    this.orderService.getAllOrdersHeaders().subscribe(headerList=>{
      headerList.forEach(headerDoc=>{
        headerDoc.get().subscribe(header=>{
          let headerMetadata:OrderHeader= new OrderHeader();
          headerMetadata.clientName= header.data().clientName;
          headerMetadata.agencyName=header.data().agencyName;
          rows3.push(headerMetadata);
        });
      })
    });
    return rows3;
  }

How to await to subscription before to return a row3 array?

Many thanks!

• javascript
• angular
• typescript

• 1 You need to convert the observable to a promise, there is an rxjs operator for this, and await the result. Then use await instead of the .subscribe. – Aluan Haddad Commented Oct 4, 2018 at 19:53
• @AluanHaddad Ok, how?... Many thanks! – AlejoDev Commented Oct 4, 2018 at 19:55

2 Answers 2

async/await can only work with Promises. So to make it work in your example, you'll have to change your Observable(s) into Promise(s).

Good thing though is, you can simply use the toPromise API on an Observable for doing that.

Another thing that you'll have to do is declare your fillOrderHeader function as async. To do that you'll have to await the calls to this.orderService.getAllOrdersHeaders().toPromise() and headerDoc.get().toPromise()

Try this:

async fillOrderHeader() {

  let rows3: Array<OrderHeader> = new Array<OrderHeader>();
  const headerList = await this.orderService.getAllOrdersHeaders().toPromise();

  for(let headerDoc of headerList) {

    const header = await headerDoc.get().toPromise();

    let headerMetadata: OrderHeader = new OrderHeader();
    headerMetadata.clientName = header.data().clientName;   
    headerMetadata.agencyName = header.data().agencyName;

    rows3.push(headerMetadata);      
  }
  return rows3;
}

try this:

async fillOrderHeader() {
   let rows3: Array<OrderHeader>= new Array<OrderHeader>();

   let headerList = await this.orderService.getAllOrdersHeaders().toPromise();
   for(let headerDoc of headerList){
       let header = await headerDoc.get().toPromise();
       let headerMetadata: OrderHeader = new OrderHeader();
       headerMetadata.clientName  = header.data().clientName;
       headerMetadata.agencyName = header.data().agencyName;
       rows3.push(headerMetadata);
   }

   return rows3;
 }