CODEWITHSUNDEEP
angularionic2
J.Luis
J.Luis

Reputation: 19

Set an ion-option with dynamic values

how can we make an <ion-select > (ionic v2) with dynamic values (ion-option).

the vaules should be token from a json object as shown below .

    {  
   "direction":[  
      {  
         "idd":"1",
         "villedepart":"kasserine",
         "villearrive":"sfax",
         "ligne_direction":"kasserine sfax"
      },
      {  
         "idd":"6",
         "villedepart":"sousse",
         "villearrive":"tunis",
         "ligne_direction":"sousse tunis"
      },
      {  
         "idd":"9",
         "villedepart":"nabeul",
         "villearrive":"sousse",
         "ligne_direction":"nabeul sousse"
      }
   ],
   "success":1
}

Upvotes: 1

Views: 1298

Answers (1)

AVJT82
AVJT82

Reputation: 73357

This can simply be done with having your json stored in a variable, here e.g values. Then you iterate through values.direction and display which property you want, here villedepart:

<ion-item>
  <ion-label>Values</ion-label>
  <ion-select [(ngModel)]="selectedValue">
    <ion-option *ngFor="let val of values.direction">{{val.villedepart}}</ion-option>
  </ion-select>
</ion-item>

Plunker

Check this link for ionic select.

You can optionally when you get your data extract the array directly from the response, which means that you can iterate the values directly:

Service:

getData() {
  return this.http.get('url')
    .map(res => res.json().direction) // this here!
}

Component:

this.myService.getData()
  .subscribe(data => {
     this.values = data;
  });

and then iterate like so:

<ion-option *ngFor="let val of values">{{val.villedepart}}</ion-option>

Upvotes: 1

Related Questions