Generating dynamic list with json response

Question

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; How can I display it properly?

sebaferreras · Accepted Answer · 2016-10-29 15:10:21Z

3

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>

answered Oct 29, 2016 at 15:10

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

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

2 Comments

cnian Over a year ago

@sebaferreas I have already tried it but, when I do that it displays nothing. I have already checked the array is empty or not with the ngIf part because, I am getting array as response from rest and bind it to my array.

cnian Over a year ago

@sebaferreas yeah you are right. I was printing the collectings. Now, its working

Collectives™ on Stack Overflow

Generating dynamic list with json response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related