how to get array of object instead of object in angular?

Question

can you please tell me how to get array of objects instead of object in angular 2.I am hitting a service and getting a object as a response .

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

getting response this

{
  "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"
    }
  ]
}

currently I am sending whole object to my component .Now I want to send only data array to my component .

currently I am receiving like this response.data .

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

But I want to insert this.users=response

here is my code https://stackblitz.com/edit/angular-4pkct8?file=src%2Fapp%2Fuserdetail.service.ts

I want to manipulate the response and send array to component

Answer 1

You can use the map operator to extract the data array from the original response. See this stackblitz for a demo.

Models :

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;
}

Service :

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

Component :

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

Answer 2

You have to transform the result from the getUsers method:

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

with map :

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

where UserModelPage is something like this:

interface UserModelPage {
  data: UserModel[]
}

Answer 3

The following would change in your user-detail.service.ts

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

and the following would change in your app.component.ts

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

I included a working representation here in case you might need it.