ionic 2 Populate Select Options from json

Question

I'm trying to dynamically populate a ion-select dropdown with a json object.

My html component looks like this:

<ion-item [hidden]="editOptions.isEditing">
  <ion-note stacked color="primary">{{label}}</ion-note>
  <ion-note class="inline-edit"> {{value}}&nbsp;</ion-note>
</ion-item>
<ion-item [hidden]="!editOptions.isEditing">
  <ion-label stacked color="primary">{{label}}</ion-label>

  <ion-select [(ngModel)]="value" [selectOptions]="additionalData" [required]="required" [name]="value">
    <!--<ion-option>None</ion-option>-->
  </ion-select>
</ion-item>

and In my calling code i try to populate the select options but they have no example in there documentation

additionalData = {
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings',
  mode: 'md'
};

How do I add my options to this select, without using an *ngFor in the html? I would prefer to just pass them like so:

additionalData = {
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings',
  mode: 'md'
  options: [{id:1, description:'Pepperoni'}]
};

robbannn · Accepted Answer · 2017-07-22T18:42:09.310

5

The [selectOptions] are used to pass creation options (docs). So you should make an iterable out of your json-object and use *ngFor.

*ngFor example:

A neat way of accessing object keys and values are by making use of Object.keys as suggested in this answer and shown below.

@Component({
  selector: 'my-page',
  templateURL: 'my-page.html
})

export class MyPage {
    // Make Object.keys available
    objectKeys = Object.keys;
    value = { option1: 'foo', option2: 'bar' };  

    constructor(){}
}

HTML

...  
    <ion-select [(ngModel)]="value" [required]="true" [name]="value">
        <ion-option *ngFor="let option of objectKeys(value)">
            {{ value[option] }}
        </ion-option>
    </ion-select>
...

This way theres no need to implement a custom pipe that basically does the same thing.

edited Jul 22 '17 at 18:42

answered Jul 22 '17 at 15:21

robbannn

5,001
1
32
47

Yup.. just scroll up a bit to get to the example.. - and ironically just below where @jonny5 got his snippet about pizzas... – JGFMK Jul 22 '17 at 15:27
@JGFMK Its not ironic, because If you read the question I do not want to use an *ngFor I want to just pass the values to the select and have it auto populate – johnny 5 Jul 22 '17 at 17:06
Also, if either of you were the ones to down vote please explain why – johnny 5 Jul 22 '17 at 17:09
No I have not down voted the question. I really don't think there's another way to accomplish what you want. Not without putting in a lot of unnecessary effort. What is the reason behind the want to not use `*ngFor`? – robbannn Jul 22 '17 at 17:19
1

yeah I was just checking I didn't think it was, but if it was I wanted to know why. I guess since it cant be don then I have to do that What I really wanted was `` – johnny 5 Jul 22 '17 at 22:27
Is there a way for the value that came from JSON api url? – Vista May 07 '20 at 03:38

score 1 · Answer 2 · answered Jul 22 '17 at 17:40

1

Have you perhaps tried...

<ion-select [selectOptions]="{
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings',
  mode: 'md'
   }">
</ion-select>

answered Jul 22 '17 at 17:40

JGFMK

8,425
4
58
92

ionic 2 Populate Select Options from json

2 Answers2

Linked