Ionic 2: Loop through list of objects

Question

I am trying to create a view that displays a list of clients and I'm running into an issue due to the fact that it's an object and because of Ionic's html types.

Here is my object:

x = { Consultation: [{name: "Joe Smith}, {name: "Jane Doe"}],
   Re-evaluation: [{name: "Joe Smith2}, {name: "Jane Doe2"}],
   Meeting: [{name: "Joe Smith3}, {name: "Jane Doe3"}],
   Testing: [{name: "Joe Smith4}, {name: "Jane Doe4"}]
}

and I define appointment_types as Object.keys(x) aka ["Consultation", "Re-evaluation", "Meeting", "Testing"].

In my view:

<ion-list>
  <ion-list-header *ngFor="let type of appointment_types">{{ type }}</ion-list-header>

  <!-- type is no longer defined after ion-list-header closes -->
  <ion-item-sliding class="shaded-slider" *ngFor="let client of appointment_types[type]"> 
    <ion-item>{{ client.name }}</ion-item>
  </ion-item-sliding>
</ion-list>

Is there something I can do to stay inside the appointment_types loop?

Iin order to access type object in <ion-item-sliding, you should put the first *ngFor in the ion-list. — developer033
– developer033, Commented May 23, 2017 at 21:21
Try adding a div with your ngFor that encompasses all. like <div *ngFor="let type of appointment_type><ion-item-sliding *ngFor...></ion-item-sliding></div> — CoCoNours
– CoCoNours, Commented May 24, 2017 at 6:47

AVJT82 · Accepted Answer · 2017-05-24 08:14:08Z

6

You can solve this by having your iteration of the type in ion-list:

<ion-list *ngFor="let type of appointment_types">

and then when you have the type and your original object x, you can iterate the x object with inner arrays like:

<ion-item-sliding class="shaded-slider" *ngFor="let client of x[type]">

So your complete template would look like this:

<ion-list *ngFor="let type of appointment_types">
  <ion-list-header >{{ type }}</ion-list-header>
  <ion-item-sliding class="shaded-slider" *ngFor="let client of x[type]"> 
    <ion-item>{{ client.name }}</ion-item>
  </ion-item-sliding>
</ion-list>

Here's a PLUNKER

edited May 24, 2017 at 8:14

answered May 24, 2017 at 7:48

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

Jeremy Thomas Over a year ago

I was thinking that, but I know their <ion-list> elements have pre-determined CSS and I wasn't sure if I really wanted to re-create a list with each iteration

AVJT82 Over a year ago

Not really understanding what you mean with your comment, but that might very well be because of that I haven't used ionic except here on SO :) But if you want to somehow build this differently, you could also wrap it with <ng-container *ngFor="....."></ng-container> but I don't know how that affects the rest of the code css-wise. But you can experiment and see how it would play out :)

Collectives™ on Stack Overflow

Ionic 2: Loop through list of objects

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