'Returning data from Ionic4 Modal [object Object]

I'm trying to create a modal window inside Home Page , pass it an radio group , when a user select one value from that radio group, and then have my modal pass back the object they've selected to Home Page again .

radio group page and html

  export class PopoverstationsPage implements OnInit {

      cities :any

      constructor(public nav : NavController,public nav : NavController,public modalController: ModalController ,public router : Route) { }

      ngOnInit() {
        console.log(this.cities)
      }

      onRadioChange(cities: Tab1Page):void {
    this.modalController.dismiss(cities);

      console.log(this.cities)
  }

    }

html

<ion-list>
        <ion-radio-group (ionChange)="onRadioChange()" [(ngModel)]="cities">
            <ion-list-header>
                <ion-label>Name</ion-label>
            </ion-list-header>

            <ion-item>
                <ion-label>ميناء خصب</ion-label>
                <ion-radio slot="start" value="26.2105,56.244" ></ion-radio>
            </ion-item>

            <ion-item>
                <ion-label>مطار خصب</ion-label>
                <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>دبا</ion-label>
                <ion-radio slot="start" value="25.615627,56.247322"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>البريمي</ion-label>
                <ion-radio slot="start" value="24.233913,55.916176"></ion-radio>
            </ion-item>

        </ion-radio-group>
  </ion-list>

home page receive value form page above then use it in test function weather

     export class HomePage implements OnInit {

              cities :any

              constructor(public nav : NavController,public modalController: ModalController) { }

              ngOnInit() {
                console.log(this.cities)
              }

            async openUserModal() {
           const modal = await this.modalController.create({
         component: PopoverstationsPage,
        componentProps: { cities: this.cities },
      });

      modal.onDidDismiss()
        .then((data) => {
          const cities= data
          console.log(cities)
      });

      return await modal.present();
    }


async test (){

  this.https.get('weather/'+this.cities+'.json')
  .subscribe(data => {

    this.weather = data

  })


}

 }

when data ara return l got [object Object] in onDidDismiss ! anyidea please ?

see console



Solution 1:[1]

To see the actual data , you need to do a JSON.stringify as follows,

modal.onDidDismiss()
        .then((data) => {
          const cities= data;
          console.log(JSON.stringify(cities));
});

Solution 2:[2]

finally l fixed

  modal.onDidDismiss().then((r) => {
    console.log("the result:", r , 'test'+ this.testy);

    this.testy = r.data.result
});

Solution 3:[3]

modal.onDidDismiss().then((result) => {
            if (result) {
                if (result.data.action_type == 'approve') {
                    this.approvePoaCheques(result.data.mpin);
                } else if (result.data.action_type == 'reject') {
                    this.rejectPoaCheques(result.data.mpin);
                }
            }
        });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sajeetharan
Solution 2 Ali Ghassan
Solution 3 Prakash Sah