How to call function inside a function waiting for the response of first function?

Question

I need to load some data in my ngOnInit.

ngOnInit() {

        this.perfilService.getPerfisList()
        .subscribe(res=> {              

            this.perfilData = res;

            for(var i= 0;i < this.perfilData.length ; i++){            
              var Indata = {'idUsuario': this.id, 'idPerfil': this.perfilData[i].id };
              console.log(Indata);
              this.usuarioperfilService.validaUsuariosPerfil(Indata)
              .subscribe(res2 => {
                this.response = res2;
                console.log(res2);    
              });
            }

        });

I need to wait for perfilService.getPerfisList to finish, iterate the response as this.perfilData and then start to call this.usuarioperfilService.validaUsuariosPerfil.

The problem is that both functions are being called at the same time so since the request of function 2 is the response of function 1, there's no response yet so the second one is being called with empty request.

How can I manage this during ngOnInit?

ngOnInit is called twice, look at https://stackoverflow.com/a/35763811/3111930 — Sebastian, Dec 03 '19 at 14:36
@Sebastian ngOnInit is called once and only once in a component lifecycle. — bryan60, Dec 03 '19 at 14:42

MoxxiManagarm · Answer 1 · 2019-12-03T14:42:06.767

1

Try this:

this.perfilService.getPerfisList().pipe(
    switchMap(perfisList => {
        const innerObservables = perfisList.map(
            perfisItem => this.usuarioperfilService.validaUsuariosPerfil({ 'idUsuario': this.id, 'idPerfil': perfisItem.id }),
        );
        return forkJoin(innerObservables);
    }),
).subscribe(x => console.log(x));

The necessary imports:

import { switchMap } from 'rxjs/operators';
import { forkJoin } from 'rxjs';

edited Dec 03 '19 at 14:42

answered Dec 03 '19 at 14:39

MoxxiManagarm

8,735
3
14
43

It's giving this: ERROR in src/app/update-usuario/update-usuario.component.ts(40,5): error TS2304: Cannot find name 'switchMap'. src/app/update-usuario/update-usuario.component.ts(43,112): error TS2552: Cannot find name 'perfilItem'. Did you mean 'perfisItem'? src/app/update-usuario/update-usuario.component.ts(45,16): error TS2304: Cannot find name 'forkJoin'. – dm-am Dec 03 '19 at 14:42
You need to add the imports for switchMap (rxjs/operators) and forkJoin (rxjs) of course! Yes I had a typo on perfisItem, I corrected it, thank you – MoxxiManagarm Dec 03 '19 at 14:43
Still giving the error: status: 400, error: "Bad Request", message: "Required request body is missing: public boolean c…m.br.tcc.workflowtrouble2020.model.UsuarioPerfil)", – dm-am Dec 03 '19 at 14:47
Thats an error from your backend, the json you send is missing that boolean, only you can say which boolean it is. You need to add it here: `{ 'idUsuario': this.id, 'idPerfil': perfisItem.id }` – MoxxiManagarm Dec 03 '19 at 14:49
Nope, it's the same error I had with my original code. The return is a boolean, the error is becase there's no request payload in the request, I can see it. – dm-am Dec 03 '19 at 14:51
Is the boolean maybe required in the first http request? – MoxxiManagarm Dec 03 '19 at 14:54
No, the only thing required in the request is the two variables. The boolean is the response, this is not the problem. The request is still missing request payload. – dm-am Dec 03 '19 at 14:57

score 0 · Answer 2 · answered Dec 03 '19 at 14:36

0

You can use RxJs operators map and forkJoin to modify response from one observable to map with another response.

more info

answered Dec 03 '19 at 14:36

Abhinav Kumar

2,883
1
17
30

How to call function inside a function waiting for the response of first function?

2 Answers2