How to wait for http request to get response before it process to next step in angular 7

Question

I am trying to build app, where i am sending one get request to get data from component. This request will be called and data will be used to execute very next step. However, it is executing next step before i get response from service.

This is my service file:

  getSabhaListDetailsName(sabhaMandalName: string): Observable<any> {
const sabhaListDetailsNameURL = this.rooturl + 'sabhatypebysabhaname';
return this.http
  .post(sabhaListDetailsNameURL,{}, { params: { sabha_name: sabhaMandalName } })
  .pipe(map(this.extractData),
   catchError(this.handleError<any>('sabhaListDetailsNameURL')));

}

this is my component file, from where i am calling service,

   this.sabhaService.getSabhaListDetailsName(element.sabha_id).subscribe(result => {
  this.tempRetrieveSabha = result.data.sabhaList;
  //return this.tempRetrieveSabha;
  //  });
  console.log(this.tempRetrieveSabha);
  this.tempRetrieveSabha.forEach(
    element1 => {
      console.log(this.tempRetrieveSabha);
      if (element1.sabha_type == element.sabha_type) {
        this.tempSabha_ID = element1.id;
        this.tempSabha_Type = element1.sabha_type;
        this.tempFollowup_ID = element.followup_id;
      }
    })
});

How can i wait for http request to finish before loop through array.

you could try using `async await` – John Velasquez Feb 06 '19 at 03:26 — John Velasquez, Feb 06 '19 at 03:26
Move foreach part code in in subscribe. – R.Sarkar Feb 06 '19 at 05:02 — R.Sarkar, Feb 06 '19 at 05:02

score 0 · Answer 1 · answered Feb 06 '19 at 03:44

0

Rxjs subscribe method will make HTTP Ajax request to trigger API call. You need to move Array loop inside subscribe method in component. Also can you please add 'extractData' code please.

Not seeing any issue in the current code.

answered Feb 06 '19 at 03:44

Suresh Kumar Ariya

9,516
1
18
27

this is my extractdata: private extractData(res: Response) { let body = res; return body || { }; } – tanmay parmar Feb 06 '19 at 19:03

score 0 · Answer 2 · answered Feb 06 '19 at 04:12

Try to implement async and await function or promises.

For example :

  async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

Refrence : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

How to wait for http request to get response before it process to next step in angular 7

2 Answers2