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.

Answer 1

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>

Answer 2

Try this :

this.clients = res.data;