can can - 1 month ago 7
TypeScript Question

Generating dynamic list with json response

I have a json array like following;

"collectings": [
{
"hint": "OPEN",
"amount": 24
},
{
"hint": "CREDIT CARD",
"amount": 347
},
{
"hint": "CASH",
"amount": 256.5
}
]


Now, I want to display this data on a list dynamically, I am trying to do it like following;

<ion-content>
<div class="row" *ngIf="collectings && collectings.length > 0">
<ion-list>
<ion-list-header>Comedy</ion-list-header>
<ion-item *ngFor="let collecting of collectings">{{collectings}}</ion-item>
</ion-list>
</div>
</ion-content>


but, it is displayed on the page like the below image;
enter image description here
How can I display it properly?

Answer

Instead of {{ collectings }} (which is the array)

<ion-item *ngFor="let collecting of collectings">{{collectings}}</ion-item>

you should print the collecting property (without the ending s) and use the hint or amount sub-properties like this:

 <ion-item *ngFor="let collecting of collectings">
   {{collecting.hint}} - {{ collecting.amount }}
 </ion-item>