Как вывести данные с многостраничного api? Angular

Question

Имею многостраничный api, необходимо вывести данные со всех страниц сразу, а не только с одной. Вот на этом моменте и случается мой "камень преткновения". Код на данный момент выглядит вот так (service.ts):

    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Planet, pagesApi } from './intfs';
import { Observable, tap } from "rxjs";
import { map } from 'rxjs/operators'

@Injectable()
export class PlService {

  url = 'https://swapi.dev/api/planets/';

  constructor(private http: HttpClient) {
  }

  getPlanets(): Observable<Planet[]> {
    return this.http.get<Planet[]>(this.url)
        .pipe(map((data: any) => {
          return data['results'];
        }))
  }
}

Как его доработать, чтобы можно было вывести данные со всех страниц? За помощь заранее благодарю!

Answer 1

Самый, наверное, простой и быстрый способ получить массив с объектами страниц - это использовать zip.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, zip } from 'rxjs';
import _ from 'lodash'; // lodash просто для удобства

@Injectable({
  providedIn: 'any',
})
export class PlService {
  readonly URL_PLANETS = 'https://swapi.dev/api/planets/';

  constructor(private _http: HttpClient) {}

  // Если нужны определенные страницы от 1 до 10 и т.д
  getAllPlanets(): Observable<any[]> { // интерфейс Planet заменил на any, чтобы протестировать, т.к Planet вы не показали
    return zip(
      ..._.range(1, 11).map((page) =>
        this._http.get(this.URL_PLANETS + page + '/')
      )
    );
  }
}

Подробнее про zip читайте в документации RxJs
про _.range() можно прочтиать тут

БЛОГ НА HUSL

Как вывести данные с многостраничного api? Angular

Ответы (1 шт):