Angular how to output a response from a get request. Showing [object Object]

Question

I am trying to get the total price from the database and showing it on my website. But on my website it is showing me [object Object]. I tried alot of different things, including changing any to string or to Observable string. I am new to angular, so i dont really know how to solve this right now. Thanks in advance!

order.service.ts:

getTotalPrice(userId: Pick<User, 'id'>): any {
    return this.http
      .get(`${this.url}/price/${userId}`, { responseType: 'json' });
  }

shoppingcart.ts:

total: any;

ngOnInit(): void {
    this.total = this.getTotalPrice(this.userId);
  }

getTotalPrice(userId: Pick<User, 'id'>): any {
    return this.orderService.getTotalPrice(userId);
  }

Html:

<h1> {{total | async}} </h1>

---

when i try this code on shoppingcart.ts:

ngOnInit(): void {
    this.total.subscribe({
      next(num) {console.log(num); }
    });
}

it is showing me this on the console.

[{…}]
0: {Totalprice: "134.94"}
length: 1
__proto__: Array(0)

Answer 1

your

getTotalPrice(userId: Pick<User, 'id'>): any {
    return this.http
      .get(`${this.url}/price/${userId}`, { responseType: 'json' });
  }

return a jsonObject {TotalPrice:"134.94"}

You can make that only return the price using map. See also that you needn't use {responseType:'json'}, by defect httpClient works (received and send) json objects. Futhermore, Declare the function that return an Observable<number>

import {Observable} from 'rxjs'
import {map} from 'rxjs/operators'

getTotalPrice(userId: Pick<User, 'id'>): Observable<number> {
    return this.http
      .get(`${this.url}/price/${userId}`).pipe(
          map((res:any)=>+res.TotalPrice)
      )
  }

See that "map" transform the response. in "res" you has the object that received calling the function, but you only want to response the property of the object TotalPrice (and convert it to number). The "+" transform the string in a number.

Well, you can use pipe(map) in another places -in your function getTotalPrice() of the shoppingcart.ts or directly, in ngOnInit this.total = +this.getTotalPrice(this.userId).TotalPrice;, but I think that it's better use in the service

Answer 2

Your angular code looks good. This is more of an issue of understanding how to iterate properly through an HTTP Json response. You can see from your console that your response is an array, and inside of that array there are objects. Your JSON response probably looks something like:

jsonResponse = [
{ TotalPrice: 0.00},
{ TotalPrice: 1.00},
]

I see you are using an 'async' pipe on your observable. In order for you to 'tap' into that observable/subscription, you need to create an object your HTML as such:

<ng-container *ngIf="total | async as totalObject">
{{totalObject | json}}
</ng-container>

The part after 'async as' is your variable name. It will contain your response from your observable. So your JSON is an array of objects. The | json pipe will display the whole response for your in JSON format. If you wanted to display each object as such you'd do something like:

<ng-container *ngIf="total | async as totalObject">
<div *ngFor="let objects of totalObject">
Your total price for this object is: {{objects.Totalprice}}
</div>
</ng-container>