Angular get Json Object and display it with HTML

Question

I have json object like this:

{
    "cartId": 1,
    "cartName": "Cart",
    "CartItems": [
        {
            "productId": 1,
            "product": {
                "productId": 1,
                "productName": "milk",
                "price": 3.0,
                "categoryId": 1,
            },
            "price": 3.0,
            "quantity": 4,
            "subTotal": 12.0
        },
        {
            "productId": 2,
            "product": {
                "productId": 2,
                "productName": "oranges",
                "price": 3.0,
                "categoryId": 5,
       
            },
            "price": 3.0,
            "quantity": 6,
            "subTotal": 18.0
        }
    ],
    "grandTotal": 30.0
}

this is my service:

getCart(): Observable<Cart[]> {

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl)
    .pipe(
      retry(1) 
    );
 } 

this is my component:

cart$: Observable<Cart[]>;

constructor(private cart_Service: CartService,private http: HttpClient) {
 }

ngOnInit() {

    this.loadCart();
 }

loadCart() {
  
    this.cart$ = this.cart_Service.getCart();

 }

I want to catch grandTotal like this in cart.component.html file:

<p *ngIf="!(cart$ | async)"><em></em></p>

<table class="table table-sm table-hover" >
  <thead>
    <tr>
      <th> Grand Total</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of (cart$ | async)">
      <td>{{ i.grandTotal }}</td>
    </tr>
  </tbody>

but I get error saying that " NgFor only supports binding to Iterables such as Arrays." I tried different solutions to convert my json object to typescript array but none of them were helpful. Can someone please help me to catch grandTotal and show it with html in my web api. I think we should have array to be able to get that grandTotal.

Answer 1

I finally could solve this. This is my service

getCart(): Observable<Cart[]> {

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl);
}

this is my component:

my_data: any;

public loadCart() {
   
    this.cart_Service.getCart().subscribe((data: Cart[]) => this.my_data = data);
}

this is my HTML:

<div>
   <p> Grand Total : {{ my_data.grandTotal }} </p>
 </div>