How to subscribe two observable at the same time, with the second observable parameter depending on the result of the first observable?

Question

I have two service, and I need to get one observable from each service. I have search on internet and found one solution, which is here : Is it good way to call subscribe inside subscribe? But it doesn't work for me. The two observable works good when they are called alone.

export class EditVarianteComponent implements OnInit {

  public currentVariante: Variante;
  public url: string;
  public value$: any;

  constructor(
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private varService: VarianteService, 
    private famService: FamillesService
  ) {}

  ngOnInit() {
    this.url = atob(this.activatedRoute.snapshot.params.id);
    //Here, I get the resource, and I want the result of this resource to be the parameter of my second observable
    this.varService.getResource(this.url)
      .pipe(
          flatMap((res1) => this.famService.getFamilleById(res1.id_famille))
      )
      .subscribe((res3) => {
          console.log(res3);
      });
  }

"res1.id_famille is undefined" or "Cannot read property 'id_famille' of undefined"? How does look `getResource` function? — barbsan, Jul 31 '19 at 07:38

Adrita Sharma · Answer 1 · 2019-07-30T14:09:54.777

0

You can try like this:

import { map } from "rxjs/operators";

this.url = atob(this.activatedRoute.snapshot.params.id);


 this.varService.getResource(this.url).pipe(
  mergeMap(res1 => this.famService.getFamilleById(res1.id_famille))
);

edited Jul 30 '19 at 14:09

answered Jul 30 '19 at 13:19

Adrita Sharma

21,581
10
69
79

I've tried the solution but in the second line I get the error : Property map does not exist on type Observable – Maxime Alza Jul 30 '19 at 13:26
1

did you import rxjs? `import 'rxjs/Rx';` that tends to be why this error comes up. – DanGo Jul 30 '19 at 13:38
Yes I have imported it but I get the error : Module not found: Error: Can't resolve 'rxjs/Rx' .. I'm blocked with this since 1 week – Maxime Alza Jul 30 '19 at 14:02
You need to `import { map } from "rxjs/operators"` – Adrita Sharma Jul 30 '19 at 14:11
this.url = atob(this.activatedRoute.snapshot.params.id); this.varService.getResource(this.url).pipe( mergeMap(res1 => this.famService.getFamilleById(res1.id_famille)) ); When I do this code, I still have the same result : res1.id_famille is undefined. Exactly the error is . HTTP Error Response 500 : http://localhost:8080/familles/undefined – Maxime Alza Jul 30 '19 at 14:30
my angular version is 8.0.1 and rxjs is 6.4.0 – Maxime Alza Jul 30 '19 at 14:32
In the network tab of the dev tools are you seeing the call to the server and the response? – DanGo Jul 30 '19 at 14:43
yes, I see it. The name is undefined and the response is this : {"cause":{"cause":null,"message":"For input string: \"undefined\""},"message":"Failed to convert from type [java.lang.String] to type [java.lang.Integer] for value 'undefined'; nested exception is java.lang.NumberFormatException: For input string: \"undefined\""} – Maxime Alza Jul 30 '19 at 14:48
1

Tnak you for you time and for your answers – Maxime Alza Jul 30 '19 at 14:48
no, when I call my API, it says that the parameter is undefined. – Maxime Alza Jul 30 '19 at 15:59
yes, I see it. But, res1.id_famille is undefined, so it returns me an error. – Maxime Alza Jul 30 '19 at 16:09

How to subscribe two observable at the same time, with the second observable parameter depending on the result of the first observable?

1 Answers1