CODEWITHSUNDEEP
javascriptangular
user944513
user944513

Reputation: 12729

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

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

Upvotes: 5

Views: 2324

Answers (3)

Divneet
Divneet

Reputation: 718

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.

Upvotes: 0

Martin Parenteau
Martin Parenteau

Reputation: 73721

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

Upvotes: 3

mrak
mrak

Reputation: 2906

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

Upvotes: 0

Related Questions