Angular get Json Object and display it with HTML

user_13867843 0
Viewed 1397

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.

ngfor angular typescript html json
2 Answers

You can try either this

return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl)
.pipe(
  map(response => response as unknows as Cart[])
  retry(1) 
);

OR

map the response as Cart[]

user_87889610

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>
user_138678430
Related