APIから取得したデータを加工して返却するサービスの作り方

Question

AngularでAPIから取得したデータを加工して返却するサービスの作り方を知りたいです。

チュートリアルではAPIの結果をコンポーネントに返却して表示するというのはありますが、サービスで加工したデータを返却する方法がなくどう作ればよいかわかりません。
pipeやmap、nextなどを使ってやれば良さそうなのはわかるのですが、そういったサンプルが乗っているサイトや本はありますか？

追記

例えばチュートリアルのtapの中でHero型のデータを元に違う型にして返却したいです。

Comments

[CHERRY]

どこに返却するのでしょうか？

Answer 1

AngularチュートリアルのgetHeroとgetHeroes関数を基にすると、

interface MoreHero {
    id: number;
    name: string;
    age: number
}

getHero(id: number): Observable<MoreHero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    catchError(this.handleError<Hero>(`getHero id=${id}`)),
    map((hero) => {
        return {
            ...hero,
            age: 17
        }
    })
  );
}

getHeroes (): Observable<MoreHero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      catchError(this.handleError<Hero[]>('getHeroes', [])),
      map((hero) => {
          return hero.map(o => ({...o, age: 17}))
      })
    );
}

という感じです。
rxjs/operatorsのmap関数を使います。