Angular 7: Как правильно this.http.get из вложенного ответа?

Question

Я изучаю Angular 7 , как правильно запросить список элементов , если они не находятся на верхнем уровне, но вложены :

Верхний уровень (работает)

[
  { id: 123, name: 'Name 123'},
  { id: 124, name: 'Name 124'},
  // ...
]

Вложенный (не работает)

{
  message: 'x items found.',
  data: [
    { id: 123, name: 'Name 123'},
    { id: 124, name: 'Name 124'},
    // ...
  ]
}

Сервис

// ...
@Injectable({ providedIn: 'root' })
export class ItemService {
  private apiUrl = 'api/items'; // items are in .data

  constructor(private http: HttpClient) {}

  getItems (): Observable<Item[]> {      
    // Here is the problem:
    return this.http.get<Item[]>(this.apiUrl, {
      pathToItems: 'data' // <- Pseudocode
    });
  }
}

Компонент

// ...
this.itemService.getItems()
  .subscribe(items => this.items = items);

Я мог бы использовать subscribe() в сервисе и вернуть содержимое .data, ноЯ думаю, что должно быть более простое решение.Мне нужно сохранить тип возвращаемого значения (массив Item).

Есть идеи?

Заранее спасибо!

Answer 1

Вы можете использовать фильтры RxJs, такие как map или filter .Это одно из преимуществ при использовании RxJs (Observables).Вы можете отфильтровать данные перед тем, как передать их компоненту.

Пример:

return this.http.get(ITEMS_URL).pipe(
  filter(response => response.filter(data => data.message === "SUCCEEDED")),
  map(response => response.map(data => data.items))
);