Angular - How to return an observable from another observable

Question

I have a component subscribing to an observable in a service. That method in turn is subscribing to an observable in a different service. I want to pass an array from the last service back to the first service, which in turn passes that array back to the component. More specifically, the component calls its local service, which then calls a data service that hits my database with an http client. The http client is working and the data service returns the array to the local service. The local service receives the array, but I can't figure out how to then pass that array back to the component as an observable. Here are the short code blocks:

Component:

this.soccerService.getPlayers(0).subscribe(
  teamPlayers => {
    this.teamPlayers = teamPlayers;
    this.currentTeam = teamPlayers.team;
    this.players = teamPlayers.players;
    this.teamColor = this.currentTeam.color;
  }

Soccer Service

this.dataService.getPlayers(teamId).subscribe( players => { 
            this.players = players;
            this.teamPlayers.team = this.team;
            this.teamPlayers.players = this.players;

            this.teamPlayers = {
                team: this.team,
                players: players
            };
            return of(this.teamPlayers);
        });  

Data Service

getPlayers(id): Observable<Player[]> {
debugger;
return this.http.get<Player[]>(apiRootCustom + '/GetPlayers/' + id, httpOptions);

}

Answer 1

You're using subscribe in your soccer service. What you want to do is pass back the observable from your data service, and have your soccer service augment the response a bit before continuing to pass it back to your component.

Think of subscribe as the "end of the road" for your observable, but you can pass the observable around to any number of subscribers and perform different operations on the response at anytime using a pipe.

Example of using different operators to change the response of an observable for different subscribers: StackBlitz

In your code try something like this:

Compoent

this.soccerService
  .getPlayers(0)
  .subscribe(
    (teamPlayers) => {
      this.teamPlayers = teamPlayers;
      this.currentTeam = teamPlayers.team;
      this.players = teamPlayers.players;
      this.teamColor = this.currentTeam.color;
    },
    (error: any) => {
      // TODO: handle any errors
    }
  );

Soccer Service

this.dataService
  .getPlayers(teamId)
  .pipe(
    map((players) => {
      this.players = players;
      this.teamPlayers.team = this.team;
      this.teamPlayers.players = this.players;

      this.teamPlayers = {
        team: this.team,
        players: players
      };

      return this.teamPlayers;
    })
  );

Data Service

  getPlayers(id): Observable<Player[]> {
    return this.http.get<Player[]>(`apiRootCustom/GetPlayers/${id}`, httpOptions);
  }