Ionic select with data in return of a SOAP


#1

I’m currently trying to display some data array into a ionic select, I’m already working with ion-select to display other data and all works… on my console data is ok but in the select option is all empty or all displayed object object.

This is my ts:

constructor(
    public navCtrl: NavController,
    private privacyProvider: PrivacyProvider,
    private formBuilder: FormBuilder,
    public modalCtrl: ModalController
    ) {

    this.getIOBlist();

    this.iob_list = new IOB_List();
    this.formIOB = this.formBuilder.group({
      iobDev: new FormControl(this.iob_list.list)
    });

  }

  getIOBlist() {
    this.privacyProvider.getIOBlist().subscribe((data) => {
      if (data) {
        console.log(data);
        this.iobService = data;
      }
    })
  }

and this is my HTML:

<ion-content>
  <form [formGroup]="formIOB">
    <ion-item>
      <ion-label stacked>IOB Devices</ion-label>
      <ion-select formControlName="iobDev" [(ngModel)]="iob_list.list" cancelText="Annulla" okText="Fatto">
      <ion-option type="text" *ngFor="let list of iobService" color="dark" [value]="iob_list.list">{{ iob_list.list }} </ion-option>
    </ion-select>
    </ion-item>
  </form>
</ion-content>

and this is my console result after the http call:

0: {DEVICE_CODE: "00"}
1: {DEVICE_CODE: "001}
2: {DEVICE_CODE: "0017"}
3: {DEVICE_CODE: "0017"}
4: {DEVICE_CODE: "001"}
5: {DEVICE_CODE: "001"}
6: {DEVICE_CODE: "001"}
7: {DEVICE_CODE: "00"}
8: {DEVICE_CODE: "001"}
9: {DEVICE_CODE: "001"}
10: {DEVICE_CODE: "0017"}
11: {DEVICE_CODE: "0017"}
12: {DEVICE_CODE: "0017"}
13: {DEVICE_CODE: "0017"}
14: {DEVICE_CODE: "0017"}

How Should I change my code in order to display this data into the select?


#2

<ion-option … [value]=“list.DEVICE_CODE”>{{list.DEVICE_CODE}}

the value you select from the options “list.DEVICE_CODE” will be binded to ngModel which is iob_list.list


#3

thanks this worked, and if I want to display it not in a select but just a item list?


#4

Make use of *ngFor and ion-list
<ion-list *ngFor=“let item of iobService”>{{item.DEVICE_CODE}}