Угловая Http Call карта Api Response

Question

Я хотел бы получить мои поездки, которые являются моим ответом от API в Angular.

Из бэкэнда я получаю:

{
  "trips": [
    {
      "id": 0,
      "name": "string",
      "startDate": "2019-06-30T06:05:48.006Z",
      "endDate": "2019-06-30T06:05:48.006Z",
      "description": "string",
      "roomSharing": true,
      "countries": [
        {
          "id": 0,
          "name": "string",
          "code": "string"
        }
      ],
      "languages": [
        {
          "id": 0,
          "name": "string",
          "code": "string"
        }
      ]
    }
  ]
}

это нормально, но у меня проблема на стороне клиента. Вот мой код для получения поездок:

  getTrips(): Observable<Trip[]> {
    return this.http.get<Trip[]>(this.apiUrl + '/Trip/Get')
      .pipe(
        tap(_ => console.log('fetched trips')),
        retry(1),
        catchError(this.handleError),
        map(data => {
          return data;
        })
      );
  }

и в моем компоненте у меня есть:

  loadTrips() {
    return this.rest.getTrips()
    .subscribe((data) => {
      this.trips = data;
      console.log(this.trips);
    }
    , err => console.log(err));
  }

Я бы хотел получить поездки по шаблону, например:

<div class="card mb-3 trip" *ngFor="let trip of trips">

но мне должно понравиться:

<div class="card mb-3 trip" *ngFor="let trip of trips.trips">

Итак, вопрос в том, как я могу отобразить свой ответ, чтобы получить массив Trip вместо массива Arps of Trips?

Answer 1

Не усложняйте, делая .map, просто сделайте:

 loadTrips() {
    return this.rest.getTrips()
    .subscribe((data) => {
      this.trips = data.trips;
    }
    , err => console.log(err));
  }

Также исправьте модель Trip[], которую вы создали, она должна быть

export interface ITripsResponse {
    trips: Trips[],
  }

return this.http.get<ITripsResponse>(this.apiUrl + '/Trip/Get')

или еще, исправить .map на

    map((data) => {   
      return data.trips; 
    })

и тогда Observable<Trip[]> будет допустимым типом возврата

Answer 2

Измените свою выписку:

return this.http.get('/Trip/Get')
  .pipe(
    tap(_ => console.log('fetched trips')),
    retry(1),
    catchError(this.handleError),
    map((data: TripsResponse) => {   // change made here; make data of type TripsResponse 
      return data.trips; 
    })
  );

, где TripsResponse равен

interface TripsResponse {
   trips: Trips[],
   ... // other fields for future if required
}

Answer 3

Если я что-то не так понимаю, это должно работать:

  interface TripsResponse {
    trips: Trips[],
  }

  getTrips(): Observable<Trip[]> {
    // use your response interface instead
    //return this.http.get<Trip[]>(this.apiUrl + '/Trip/Get')
    return this.http.get<TripsResponse>(this.apiUrl + '/Trip/Get')
      .pipe(
        tap(_ => console.log('fetched trips')),
        retry(1),
        catchError(this.handleError),
        map(data => {
          return data.trips; // set it properly here
        })
      );
  }