Handling data – transformation operators

In our DiaryComponent application component, which renders a list of diary entries, we can notice that our component needs to know the details of the return value taken from the API, in which case the detail is returned in an attribute called item.

Let’s refactor the service to return just what the component needs already formatted, abstracting the structure of the API.

In the ExerciseSetsService service, we will refactor the following methods:

import { Observable, map } from 'rxjs';
. . .
export class ExerciseSetsService {
. . .
  getInitialList(): Observable<ExerciseSetList> {
    const headers = new HttpHeaders().set('X-TELEMETRY', 'true');
    return this.httpClient
      .get<ExerciseSetListAPI>(this.url, { headers })
      .pipe(map((api) => api?.items));
 ...