CODEWITHSUNDEEP
angulartypescriptlistviewobjectnativescript
Alon Bi
Alon Bi

Reputation: 83

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

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:

image

Upvotes: 0

Views: 153

Answers (2)

FrontEnd-er
FrontEnd-er

Reputation: 663

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>

Upvotes: 0

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

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>

Upvotes: 2

Related Questions