Creating a dynamic list using json response

Question

I have a json array, for example:

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

Now I want to display this data dynamically in a list, I am trying to do it as follows:

<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 as shown below; How can I display it correctly?

Answer 1

Instead {{ collectings }}(which is an array)

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

you must print the property collecting(without end s) and use sub-properties hintor amount, like this:

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