rxjsswitchmap

Should I use map or switchmap when using angular http module?


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
      };
    }));
  }

Solution

  • map and switchMap have completely different purposes:


    map

    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).