ListView items show up as [object object] Array in array

Question

I have a question about my code. I have this JSON:

cart

[
  {
    "_id": "5d2c9123fc70b57e44ec7924",
    "userid": "11E76234942299FCC13FFA163EDC2079",
    "dateCreated": "2019-07-15T14:43:47.282Z",
    "deleted": 0,
    "purchased": 0,
    "products": [
      {
        "productID": "2",
        "price": "100",
        "quantiy": "3"
      },
      {
        "productID": "3",
        "price": "100",
        "quantiy": "1"
      },
      {
        "productID": "14",
        "price": "100",
        "quantiy": "1"
      }
    ]
  }
]

I am fetching the JSON from this function:

getcart() {
  this.ws.getCart().subscribe(
    cart => {
      this.cart = cart;
      console.log('cart', cart)
    },
    err => console.error('error', err),
    () => console.log('error')
  );
}

Now I want to show products in the view, for this I wrote this code in html:

<ListView row="1" class="list-group" [items]="cart" style="height:1250px">
    <ng-template let-shop="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <StackLayout height="100%">
                <Label [text]="shop._id"></Label>
                <Label [text]="shop.userid"></Label>
                <Label [text]="shop?.products"></Label>
            </StackLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>

The view i am getting:

MoxxiManagarm · Accepted Answer · 2019-07-16 10:43:50Z

2

Products is also an array, you need to iterate it. Try something like

<Label *ngFor="let product of shop.products" [text]="[product.id, product.userid, product.quantity].join()"></Label>

answered Jul 16, 2019 at 10:43

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

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

Comments

FrontEnd-er · Accepted Answer · 2019-07-19 13:46:13Z

0

Try to this:-

 <ListView [items]="items" class="list-group">
    <ng-template let-shop="item" let-i="index">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <StackLayout orientation="horizontal">
                <Label [text]="shop._id" marginRight="5" style="color:red"></Label>
                <Label text="->" style="color:#000000"></Label>
                <Label *ngFor="let product of shop.products" textWrap="true" text="{{ product.productID +'\n'+ product.price +'\n'+ product.quantiy }}"></Label>
            </StackLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>

edited Jul 19, 2019 at 13:46

answered Jul 19, 2019 at 13:04

FrontEnd-er

6734 silver badges14 bronze badges

Collectives™ on Stack Overflow

ListView items show up as [object object] Array in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related