как получить массив объекта вместо объекта в угловых?

Question

Подскажите, пожалуйста, как получить array of objects вместо object в угловом формате 2. Я запускаю службу и получаю object в ответ.

getUsers(): Observable<HttpResponse<UserModel>> {
    return this.http.get<HttpResponse<UserModel>>(this.configUrl).pipe(
      catchError(this.handleError)
    );
  }

получаю ответ

{
  "page": 1,
  "per_page": 3,
  "total": 12,
  "total_pages": 4,
  "data": [
    {
      "id": 1,
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
    },
    {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
    },
    {
      "id": 3,
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
    }
  ]
}

в настоящее время я отправляю whole object to my component. Теперь я хочу отправить только data массив моему компоненту.

в настоящее время я получаю вот так response.data.

this.userDetail.getUsers().subscribe((response: any) => {
      console.log(response);
      this.users = response.data;
    },

Но я хочу вставить this.users=response

, вот мой код https://stackblitz.com/edit/angular-4pkct8?file=src%2Fapp%2Fuserdetail.service.ts

Я хочу манипулировать ответом и отправить arrayк компоненту

Answer 1

Вы можете использовать оператор map для извлечения массива данных из исходного ответа.См. этот стек для демонстрации.

Модели :

export interface UserModelResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: Array<UserModel>
}

export interface UserModel {
  id: number;
  first_name: string;
  last_name: string;
  avatar: string;
}

Сервис :

getUsers(): Observable<Array<UserModel>> {
  return this.http.get<UserModelResponse>(this.configUrl).pipe(
    map(x => x.data),
    catchError(this.handleError)
  );
}

Компонент :

ngOnInit() {
  this.userDetail.getUsers().subscribe((response: Array<UserModel>) => {
    console.log(response);
    this.users = response;
  }, (error) => {
    console.log('error', error);
  }, () => {
    console.log('complete');
  });
}

Answer 2

В вашем user-detail.service.ts

getUsers(): Observable<HttpResponse<UserModel>> {
    return this.http.get<HttpResponse<UserModel>>(this.configUrl).pipe( 
      map((res:any) => {
        return res.data;
        })
    );
  }

изменится следующее, а в вашем app.component.ts * изменится следующее1008 *

ngOnInit() {
    this.userDetail.getUsers().subscribe((response: any) => {
      console.log(response);
      this.users = response;
    }, (error) => {
      console.log('error', error);
    }, () => {
      console.log('complete');
    });
  }

Я включил рабочее представление здесь на случай, если оно вам может понадобиться.

Answer 3

Необходимо преобразовать результат с помощью метода getUsers:

 getUsers(): Observable<UserModel[]> {
    return this.http.get<UserModelPage>(this.configUrl)
    .pipe(map(res => res.data), catchError(this.handleError));
  }

с помощью map:

import { catchError, map } from 'rxjs/operators';

, где UserModelPage выглядит примерно так:

interface UserModelPage {
  data: UserModel[]
}