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

Question

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

Bhagwat Tupe · Accepted Answer · 2019-04-01 18:00:25Z

1

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.

answered Apr 1, 2019 at 18:00

Bhagwat Tupe

1,9631 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

olibiaz · Accepted Answer · 2019-04-01 11:38:57Z

0

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>

edited Apr 1, 2019 at 11:38

olibiaz

2,6034 gold badges31 silver badges33 bronze badges

answered Apr 1, 2019 at 10:51

jogaleumesh

1561 silver badge9 bronze badges

7 Comments

Karthik Over a year ago

After adding that also not displaying. @Umesh J

jogaleumesh Over a year ago

please share the "cartarray" result json

Karthik Over a year ago

"items": { "29.2.2.0.YTowOnt9": { "j2store_orderitem_id": null, "order_id": null, "orderitem_type": "normal", "cart_id": "59", "cartitem_id": "29", "product_id": "2" }, "30.5.5.0.YTowOnt9": { "j2store_orderitem_id": null, "order_id": null, "orderitem_type": "normal", "cart_id": "59", "cartitem_id": "30", "product_id": "5" }

jogaleumesh Over a year ago

the "cartarray" result is objects not an array of objects. *ngFor required array of objects

Karthik Over a year ago

help me to display a array of object

|

vd_virani · Accepted Answer · 2019-04-01 14:30:13Z

0

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

answered Apr 1, 2019 at 14:30

vd_virani

1539 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related