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

Martin Parenteau · Accepted Answer · 2018-06-05 12:17:41Z

3

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

answered Jun 5, 2018 at 12:17

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mrak · Accepted Answer · 2018-06-05 12:17:39Z

0

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[]
}

answered Jun 5, 2018 at 12:17

mrak

2,92623 silver badges23 bronze badges

Comments

Code Guru · Accepted Answer · 2018-06-06 06:24:41Z

0

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.

edited Jun 6, 2018 at 6:24

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Jun 5, 2018 at 12:27

Divneet

7184 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related