I use the following code in an angular app. I used the RxJS map
call similar to how array map
is used. After reading about RxJS switchmap
operator, I'm not sure whether I should use map
or switchmap
. Should I use switchmap
so the observable which is returned from the http
call is closed so there is no memory leak?
getPeopleForTypeahead(term: string): Observable<IPersonForTypeahead[]> {
var peopleUrl = `https://localhost:5001/api/peoplesearch?name=${term}`;
return this.http.get<any>(peopleUrl)
.pipe(
map(pl => {
return this.peopleAsFlattened(pl.peopleList).reduce((p, c) => p.concat(c));
}),
catchError(this.handleError('getPeopleForTypeahead', []))
);
}
peopleAsFlattened = (pla: IPeopleList[]) => {
return pla.map(pl => pl.people.map(p => {
return {
id: p.id,
fullName: p.fullNames[0].firstName + " " + p.fullNames[0].lastName
};
}));
}
map
and switchMap
have completely different purposes:
map
- transform the shape of an emissionswitchMap
- subscribe to an observable and emit its emissions into the streammap
Use map
when you want transform the shape of each emission. Ex: emit the user name property, instead of the entire user object:
userName$: Observable<string> = this.service.getUser(123).pipe(
map(user => user.name)
);
switchMap
Use switchMap
when you want to map an emission to another observable and emit its emissions. Ex: You have an observable of some id
and want to emit the resource after fetching it:
user$: Observable<User> = this.userId$.pipe(
switchMap(id => this.service.getUser(id)),
);
When user$
is subscribed to, the user returned from service.getUser(id)
is emitted (not the userId string).