can can - 1 year ago 77
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;

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

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

Answer Source

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 }}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download