CODEWITHSUNDEEP
htmlangulartypescriptionic-frameworkionic3
Karthik
Karthik

Reputation: 5759

How to display a array elements in HTML(ionic 3)

I'm new to ionic. Actually, I'm trying to display products added to cart in cart page. I got value from Foreach method, but when I try to display, it won't show.

cartpage(){
  this.cart.cartview().then((result) => {
    this.cartdisplay = JSON.parse(JSON.stringify(result));
    this.categorydata = JSON.parse(JSON.stringify(this.cartdisplay.data));
    console.log('result11:'+JSON.stringify(this.categorydata));

     var arr = Object.keys(this.categorydata.items);

      //this.cartarray =[];

    arr.forEach( a =>{

      this.cartarray['orderitem_name']= this.categorydata.items[a].orderitem_name;
      this.cartarray['orderitem_quantity']= this.categorydata.items[a].orderitem_quantity;
      console.log('cart : '+this.cartarray['orderitem_quantity']);

      console.log(a) //item id
      console.log(this.categorydata.items[a].cart_id) //product id
    })
    console.log(this.cartarray);
  })
}

in the console log, orderitem_name and orderitem_quantity is displaying, but it does not show in the HTML page. This is my HTML code:

<ion-card>
  <ion-card-header>Items</ion-card-header>
  <!--<ion-card-content >Your cart is empty!</ion-card-content>--> 
  <ion-list no-lines>
    <ion-item  *ngFor="let tms of cartarray;" >
      <ion-avatar item-left>
        <img src="">
      </ion-avatar>
      <h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
      <div [ngSwitch]="product?.price_discount">
        <p *ngSwitchCase="true">₹ <span st></span> <span></span></p>
        <p *ngSwitchDefault>₹ <span style="text-decoration: line-through;"></span> <span></span></p>
      </div>
      <div>
        <button primary large>
          <ion-icon name="add" (click)="increaseQuantity(i)"></ion-icon>
        </button>
        <button primary large>
          <ion-icon name="remove" (click)="decreaseQuantity(i)"></ion-icon>
        </button>
      </div>
    </ion-item>
  </ion-list>
  <!--<ion-card-content ><div>Total for this order is ₹ </div></ion-card-content>-->
</ion-card>

Help me to display a value in foreach loop in ionic 3

Upvotes: 0

Views: 2259

Answers (3)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

You can try these

this.cart.cartview().then((result) => { 
  this.cartarray = Object.keys(result["data"]["items"]).map((key) => {
      return result["data"]["items"][key]; 
  });
})

And your html file

<div *ngFor="let tms of cartarray;">
  <h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</div>

i don't no ionic so thats why i'am testing with div but it's work fine.

Upvotes: 1

vd_virani
vd_virani

Reputation: 153

You should debug your array like 

<ion-item  *ngFor="let tms of cartarray;" >       
<h2><b>{{tms | json }} x {{tms | json}}</b></h2>        
</ion-item>

Thanks

Upvotes: 0

jogaleumesh
jogaleumesh

Reputation: 156

you miss the "tms" variable name before display list of data 

<ion-item  *ngFor="let tms of cartarray;" >       
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>        
</ion-item>

Upvotes: 0

Related Questions