Angular 7 Http Get returning '[object Object]'

angular 7 http get example
angular 8 http get example
angular 7 http post example
@angular/http angular 8
angular 2 http get example
@angular/common/http
@angular/http not found
@angular/http npm

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.

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>

Get data from a server, All HttpClient methods return an RxJS Observable of something. HTTP is a request/response protocol. You make a request, it returns a single response. In general,  I’ll be using Bootstrap 4 CSS framework with Angular 7 for consuming RESTful API with HttpClient service. Hit the following command to get the Bootstrap in your Angular app. npm install bootstrap. After that, Go to angular.json file and replace the given below code with “styles”: [ ] array.

Try this :

this.clients = res.data;

Angular, This sends an HTTP GET request to the npm api for a list of packages that belong to the @angular scope, then assigns the total returned in the  An angular application will use http via a GET request to fetch data from a back-end server. The back-end could be powered by any number of server-side technologies such as Java, PHP, Python, or even server-side JavaScript in the form of Node.js.

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

AngularJS: API: $http, multiple values over time. An observable from HttpClient always emits a single value and then completes, never to emit again. Angular 9 HttpClient is an inbuilt module that helps us to send network requests to any server. Angular HttpClientModule is used to send GET, POST, PUT, PATCH, and DELETE requests. Angular can consume REST API using the Angular HttpClient module. The latest version of the Angular framework is Angular 9. If you are new to Angular 9, then check out my Angular 9 Tutorial in this blog.

Angular HTTP Client - QuickStart Guide, API is based on the deferred/promise APIs exposed by the $q service. Pro-tip 2: If you are changing return type for any reason you can use: return <TypedArray[]> arrParsed["something"]; Pro-tip 3: Angular hates you feed it with html so you need to find some cool solution like when templating adding a replace of token to new line

Angular 7 Http Get returning '[object Object]', service as a dependency of an application class, as shown in the following ConfigService example. The return type is Observable<SearchItem[]>, it’s going to return an observable where each item in the observable is SearchItem[], each item in the observable is going to be an array of SearchItems.

HTTP Example with Observables • Angular, then we are calling the get() method, which is returning an Observable; This observable returns an Object directly, so the HTTP library by default  In this post, we'll create a simple example with Angular 9/8 and HttpClient that sends Ajax Get and Post requests to fetch and post data from/to a backend server. The server can be either your own server or a third-party server. In our case, we'll be using a third-party server. We assume you already have a project ready and Angular CLI installed.

Comments
  • Are you using HttpClient? if not then you need res.data
  • import { HttpClientModule } from '@angular/common/http';
  • Yes, I using HttpCliente. With res.data I get the following error: error TS2339: Property 'data' does not exist on type 'Client[]'.
  • Try look into the network tab, are you getting the correct response as you said "My Api is returning an Array of objects"
  • @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.
  • Man! you are a lifesaver hehehe it works like a charm! thanks!
  • @ThiagoReis but the question still remains as you said "My Api is returning an Array of objects"
  • With res.data I get the following error: error TS2339: Property 'data' does not exist on type 'Client[]'.
  • HttpClient.get() applies res.json() automatically and returns Observable<HttpResponse<string>>. You no longer need to call this function yourself.