Angular 7 Http Get returning '[object Object]'

Question

I have a service who call an API with the following function:

getAll(): Observable<Client[]> {
    return this.http.get<Client[]>(`${this.url}/clients`) 
}

And in my component the service call :

  getClients() {
      this.clientService.getAll().subscribe(
      res => {
         this.clients = res;
         console.log(this.clients);
      },
      err => {
        console.log(err);
      }
);}

With this, I get a response object of objects. My API is returning an Array of objects, but someway the Observable function transforms the data in an object of objects with numeric indices: Console img with error

anyone knows what's the problem?

Solution:

Using KeyValue Pipe is a workaround like commented by @Suryan. The problem was a sort method in my API, which changed the array into an object. It's not necessary to use pipe or map in service, as well not necessary use pipe keyvalue. @Suryan make an example demonstrating this point.

Yes, I using HttpCliente. With res.data I get the following error: error TS2339: Property 'data' does not exist on type 'Client[]'. — Thiago Reis
– Thiago Reis, Commented Oct 25, 2018 at 13:10
Try look into the network tab, are you getting the correct response as you said "My Api is returning an Array of objects" — Suryan
– Suryan, Commented Oct 25, 2018 at 13:14
@Suryan My API return is correct. The problem is in Angular. Request the API with Angular 6 version works fine. The problem is only when I update the Angular version for 7. — Thiago Reis
– Thiago Reis, Commented Oct 25, 2018 at 13:32

Suresh Kumar Ariya · Accepted Answer · 2018-10-25 13:07:23Z

4

Using KeyValue Pipe will solve the problem

<div *ngFor="let item of clients | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

answered Oct 25, 2018 at 13:07

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

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

2 Comments

Thiago Reis Over a year ago

Man! you are a lifesaver hehehe it works like a charm! thanks!

Suryan Over a year ago

@ThiagoReis but the question still remains as you said "My Api is returning an Array of objects"

Charlie Rabiller · Accepted Answer · 2018-10-25 12:52:39Z

1

Try this :

this.clients = res.data;

answered Oct 25, 2018 at 12:52

Charlie Rabiller

5124 silver badges7 bronze badges

1 Comment

Thiago Reis Over a year ago

With res.data I get the following error: error TS2339: Property 'data' does not exist on type 'Client[]'.

Sarthak Aggarwal · Accepted Answer · 2018-10-25 12:54:13Z

-2

Try making the following changes in your .service.ts file

getAll(): Observable<Client[]> {
    return this.http.get<Client[]>(`${this.url}/clients`).map(res=>res.json()); 
}

answered Oct 25, 2018 at 12:54

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

1 Comment

Charlie Rabiller Over a year ago

HttpClient.get() applies res.json() automatically and returns Observable<HttpResponse<string>>. You no longer need to call this function yourself.

Collectives™ on Stack Overflow

Angular 7 Http Get returning '[object Object]'

Solution:

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution:

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related