Angular get method with new httpClient

Question

is there a equivalent to this "res.json().data" in new HttpClient in angular 5 I'm currently using? Because my api gives me back this kind of json object?

{"data":[{"something":1,"somethingelse":"62968D6B-B50E-4C46-BDB7-8152E3DFB8AC","somethingsomething":null}]}

And previously I've been able to extract data using .data, but no longer can do that, help :(

   //in my service
    getUsers() { 
  return this._http.get(url)
      .map(res => res.json().data)
       .catch(this._errorHandler);
    }
  //in my component.ts
  this.service.getUsers().subscribe(users => {
   this.users = users;

UPDATE In my component

       this._usermanagementservice.getEmployees().subscribe((data) => { 
       this.employeelist = data; });

And in the service getEmployees() {

           return this._http.get<employee[]>('url')
           .map(res => res.data)
        }

english is not my primary language so sorry for that, here's the error I get Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. And I've done everything correctly, but can't seem to get my data, data which I use to populate a simple table... — Questions
– Questions, Commented Feb 15, 2018 at 12:43
no problem brother, thats right if you are using ngFor you need array so for that in ngFor use this ngFor="let user of users.something" so something is an array. — Hrishikesh Kale
– Hrishikesh Kale, Commented Feb 15, 2018 at 12:45
in angular 5 (angular 4.3 I guess,) the httpClient assumes the default response and request format is JSON unless otherwise stated. So you can directly expect an object from HTTP calls without having to parse it on your own. Please accept the below answers if they helped you. — Vignesh
– Vignesh, Commented Feb 15, 2018 at 13:07

David · Accepted Answer · 2018-02-16 08:46:20Z

1

With httpclient, data is automatically converted to an object, and you can explicitely type it

(The typing is not necessary but it's usually easier to use after°

interface IUser
{
 name: string;
//other
}

getUsers(): Observable<User[]> { 
  return this._http.get<User[]>(url)
             .catch(this._errorHandler);
    }

In your specific example, it looks like the data is in a data property of the response, so you need to use map (like you already do)

 getUsers(): Observable<User[]> { 
  return this._http.get(url)
      .map((res : any) => res.data as User[])
       .catch(this._errorHandler);
    }

    //in my component.ts
this.service.getUsers().subscribe(users : User[] => {
this.users = users;

edited Feb 16, 2018 at 8:46

answered Feb 15, 2018 at 12:44

David

34.6k13 gold badges90 silver badges124 bronze badges

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

10 Comments

Questions Over a year ago

now I get an error saying property data doesn't exist on my type User[]

Questions Over a year ago

angular cli gives me back that error, and my visual studio, but app seems to work just as I want it if I edit my code AFTER "ng serve", crazy lol now I need to find out if there's something I could do prevent that...

David Over a year ago

What error do you get now then? You mention an error about 'User' class, but you don't seem to be using it in the updated code

Questions Over a year ago

yeah, Its' class employee, sorry about that, but back to my previous point, errorI get is that there's no "data" in my class... which is annoying :(

Questions Over a year ago

export class employee { id: string; firstName: string; lastName: string; email: string; address: string; }

|

VIshal Jain · Accepted Answer · 2018-02-15 12:39:20Z

1

In new HttpClientModule module we do not need to invoke map() to parse out the response data using the extractData() method. This method has been removed, and we simply return the Observable. The default responseType is JSON, and as such, the response data is already parsed for us. Try modifying your code to this

In service

getUsers() { 
 return this._http.get(url)
}

In component

this.service.getUsers().subscribe(users => {
this.users = users;

answered Feb 15, 2018 at 12:39

VIshal Jain

6221 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular get method with new httpClient

2 Answers 2

10 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Related