How to make API calls inside a for loop to wait for one to finish before making another in Angular using observables?

Question

I have a for loop that makes one API call depending on the length of the array if the length of the array is 6 so there will be 6 API calls, the problem is that are asynchronous calls so some of them gave me errors, How can I do to every API call inside of the loop wait until its done so then can be another call?

I really want to do it with observables and not promises

This is my service where I do the call

 respuestaEncuesta(respuesta:any,idEncuesta:number,idPregunta:number){
    return this.http.post(this.API_URL+'api/encuestas/'+idEncuesta+'/preguntas/'+idPregunta+'/respuesta',respuesta,this.httpOptions)
  }

Here is my for loop, the only thing I do in the function sends the array and then do the loop, this is on my ts and here I call the function that does the API call inside a service

for (let j=0;j < this.obj.data.length; j++){
      this.userService.respuestaEncuesta(this.obj.data[j],this.id,this.auxPreguntas[j])
      .subscribe(
        res => {
          let auxRes:any;
          auxRes = res;
          if(auxRes.estado == 'success'){
            console.log('successful call')
          }
        },
        err => {
          console.log(err)
        }
      )
    }

I tried with forkjoin like this but didn't work some of the requests are not sending

respuesta:any = [];
for (let j=0;j < this.obj.data.length; j++){
this.respuesta.push(this.userService.respuestaEncuesta(this.obj.data[j],this.id,this.auxPreguntas[j])) 
    }
forkJoin(this.respuesta)
    .subscribe(
      results => {
        console.log(results);
      }
    )

Are you looking for something like this: https://stackoverflow.com/questions/48593611/wait-for-observable-in-for-loop-to-finish-before-continuing-loop-in-angular-5 — Zack, Dec 17 '20 at 22:21
Does this answer your question? [How to make a sequence of http requests in Angular 6 using RxJS](https://stackoverflow.com/questions/53560652/how-to-make-a-sequence-of-http-requests-in-angular-6-using-rxjs) — GreyBeardedGeek, Dec 17 '20 at 22:43

Rob Monhemius · Answer 1 · 2020-12-17T23:31:41.760

0

You may be looking for concatMap

example

stackblitz: https://stackblitz.com/edit/angular-ivy-ms2yst?file=src/app/app.component.ts

let data = [1, 2, 3];
of(...data)
.pipe(
  // use a concatmap
  concatMap(value => {
    return of(value).pipe(delay(2000)) 
    // this represents your request
  })
)
.subscribe(item => {
  console.log(item);
  // requests should now be made one after another, do whatever
});

edited Dec 17 '20 at 23:31

answered Dec 17 '20 at 22:48

Rob Monhemius

4,822
2
17
49

I tried this and said this `error` Property pipe does not exist on type Observable[] – Rinzler21 Dec 17 '20 at 23:08
Ah right. I think this is what you are looking for: https://stackblitz.com/edit/angular-ivy-ms2yst?file=src/app/app.component.ts. I ll edit the post accordingly ;) – Rob Monhemius Dec 17 '20 at 23:29
I put it and it's not working please check my updated question, if you can please give me an example with my code – Rinzler21 Dec 17 '20 at 23:59
You should prep the data so it is useful enough to create the arguments of your http-request. But I am sure you can do all of that yourself. – Rob Monhemius Dec 18 '20 at 00:23

How to make API calls inside a for loop to wait for one to finish before making another in Angular using observables?

1 Answers1