# Ion-select does not show selected option when value is an object type

**URL:** <https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644>\
**Category:** Ionic Framework\
**Created:** [October 9, 2020, 9:22am UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644 "2020-10-09T09:22:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pratikpdw](https://avatars.discourse-cdn.com/v4/letter/p/ce7236/32.png) [@pratikpdw](https://forum.ionicframework.com/u/pratikpdw)\
**Post date:** [October 9, 2020, 9:22am UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/1 "2020-10-09T09:22:22Z")

</div>

I am trying to use select-option values as objects.

```auto
 <ion-item>
    <ion-label>Choose</ion-label>
    <ion-select [value]="{key:'abc',value:'ABC'}">
      <ion-select-option value="{key:'abc',value:'ABC'}">ABC</ion-select-option>
      <ion-select-option value="{key:'pqr',value:'PQR'}">PQR</ion-select-option>
      <ion-select-option value="{key:'xyz',value:'XYZ'}">XYZ</ion-select-option>
    </ion-select>
  </ion-item>

```

When popup opens it does not show the selected value.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/a/da57fb7e5399503e5d58b95528fc6a3955f4ed20.png)

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [October 9, 2020, 9:59pm UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/2 "2020-10-09T21:59:42Z")

</div>

JavaScript is a terrible language, so this isn’t really your fault.

I would suggest reading [this thread](https://forum.ionicframework.com/t/default-selected-value-of-ion-select/124742) in its entirety.

---

<div class="post-metadata">

**Author:** ![aalbayrak](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aalbayrak/32/134179_2.png) [@aalbayrak](https://forum.ionicframework.com/u/aalbayrak)\
**Post date:** [October 10, 2020, 1:01am UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/3 "2020-10-10T01:01:17Z")

</div>

Hello @pratikpdw ,  
Please try with ngModel. I tried on Ionic 5 it works. Please search on $event . You can use it like (ionChange) = “myfunction($event)” . You can call any variable in selected value.  
TS Code:

```auto
export class Tab2Page {
   test={
  selected:'{"key":"abc","value":"ABC"}',
  selectedObject: {key:"abc",value:"ABC"}
  }
  constructor() {}

  stringToObject(selected){
    this.test.selectedObject = JSON.parse(selected);
    console.log(this.test.selectedObject);
    console.log(this.test.selectedObject.key);
  }
}

```

HTML

```auto
    <ion-item>
        <ion-label>Choose</ion-label>
        <ion-select [(ngModel)]="test.selected" (ionChange)="stringToObject(test.selected)">
            <ion-select-option value='{"key":"abc","value":"ABC"}'>ABC</ion-select-option>
            <ion-select-option value='{"key":"pqr","value":"PQR"}'>PQR</ion-select-option>
            <ion-select-option value='{"key":"xyz","value":"XYZ"}'>XYZ</ion-select-option>
        </ion-select>
    </ion-item>

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [October 10, 2020, 4:42am UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/4 "2020-10-10T04:42:23Z")

</div>

> [@aalbayrak](#):
>
> I tried on Ionic 5 it works.

What you have there are not objects. They are strings. Strings do not suffer the same gnarly comparison problems inherent in the design of JavaScript that objects do.h

---

<div class="post-metadata">

**Author:** ![aalbayrak](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aalbayrak/32/134179_2.png) [@aalbayrak](https://forum.ionicframework.com/u/aalbayrak)\
**Post date:** [October 10, 2020, 9:48am UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/5 "2020-10-10T09:48:37Z")

</div>

Thanks for the warning. It escaped my attention, I made the necessary arrangements.

---

<div class="post-metadata">

**Author:** ![kaleming](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@kaleming](https://forum.ionicframework.com/u/kaleming)\
**Post date:** [August 27, 2021, 7:35pm UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/6 "2021-08-27T19:35:56Z")

</div>

Hi Guys,

I am having this same issue with ionic-vue. Any idea how to solve it ?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 27, 2021, 7:48pm UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/7 "2021-08-27T19:48:20Z")

</div>

I’ve never used Vue, but JavaScript is JavaScript. Have you read all the threads linked to in here?

---

<div class="post-metadata">

**Author:** ![kaleming](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@kaleming](https://forum.ionicframework.com/u/kaleming)\
**Post date:** [August 27, 2021, 8:09pm UTC](https://forum.ionicframework.com/t/ion-select-does-not-show-selected-option-when-value-is-an-object-type/197644/8 "2021-08-27T20:09:43Z")

</div>

Hi @rapropos,

On ion-select docs, I noticed just for react, there is an example using comparewith.

```auto
        <IonLabel>Users</IonLabel>
            <IonSelect compareWith={compareWith} value={selectedUsers} multiple onIonChange={e => setSelectedUsers(e.detail.value)}>
              {users.map(user => (
                <IonSelectOption key={user.id} value={user}>
                  {user.first} {user.last}
                </IonSelectOption>
              ))}

```

This is what I was looking for. It works for vue too.

Tks