Conditionals and assignments before switchmap in Angular7

Question

I'm still trying to get my head around rxjs in Angular, I still don't fully understand pipes and operators. I need help with this scenario and what would be the correct way to do it (allready tried a dirty way and accomplished it but didn't feel right).

I want to fetch some data when loading a page, referenced by a param in the route. There are two scenarios, if it has an id it should save it to a local variable, then, fetch the data and process it. If it does not have any id param, it should skip the data fetch. The code I have is this:

        this.activatedRoute.params.pipe(
            //I want to save params.id to this.id here
            //I dont want to execute the switchmap if params.id is empty
            switchMap(params => this.establishmentService.getEstablishment(params.id))
        ).subscribe(/* process data */);

How do I access the data returned from activatedRoute params for the local variable and how do I avoid the getEstablishment function if that param is null? Thank you.

satanTime · Answer 1 · 2020-05-23T11:35:16.093

1

You need to use tap and filter for that.

this.activatedRoute.params.pipe(
  tap(params => this.id = params.id), // saving id
  filter(params => !!params.id), // ignoring service until we have an id
  switchMap(params => this.establishmentService.getEstablishment(params.id)),
).subscribe(servieResult => {});

edited May 23 '20 at 11:35

answered May 23 '20 at 11:17

satanTime

12,631
1
25
73

thanks, this worked great, I'll have to take a look at tap function – Guillermo Bascuñana May 23 '20 at 11:26
You are welcome, tap executes callbacks like `subscribe` does and doesn't affect current stream value. – satanTime May 23 '20 at 11:27

score 0 · Answer 2 · answered Aug 09 '22 at 15:42

0

An alternative could the use of the expand as described under https://stackoverflow.com/a/54514832/6585002

answered Aug 09 '22 at 15:42

Ceddaerrix

304
1
14

score -1 · Answer 3 · answered May 23 '20 at 11:18

To begin with, you can easily avoid executing getEstablishment with a ternary operator to check if params.id is null

 this.activatedRoute.params.pipe(
            switchMap(params => params.id ? this.establishmentService.getEstablishment(params.id)) : params
        ).subscribe(/* process data */);

Conditionals and assignments before switchmap in Angular7

3 Answers3