Return object from function in a service in ionic (ionic picker)-CodePudding

In my app, I would like to have a different picker, with two or three columns, so I made 2 different functions to simplify the code. Now I'd like to return my object with my result when the Validate button is pressed. I think I need to deal with Promise, but I am not so familiar with it and I think I am doing something wrong.

Here is my function inside my service :

  async pickerTwoColumns(obj: objectTwoColumns ) {
    this.clearObject(obj.firstColumnOptions);
    this.clearObject(obj.secondColumnOptions);
    let options: PickerOptions = {
      //cssClass: 'picker',
      backdropDismiss: false,
      buttons: [
        // {
        //   text: 'Annuler',
        //   role: 'cancel'
        // },
        {
          text: 'Valider',
          handler: () => {
            return true;
          }
        }
      ],
      columns:[
        {
        name:obj.firstColumnName,
        selectedIndex: obj.firstColumnIndex,
        suffix: obj.firstColumnSuffix,
        options: obj.firstColumnOptions,
        columnWidth: '5',
        suffixWidth: '1',
        prefixWidth: '10',


      },
      {
        name:obj.secondColumnName,
        selectedIndex: obj.secondColumnIndex,
        suffix: obj.secondColumnSuffix,
        options: obj.secondColumnOptions,
        columnWidth: '10',
        suffixWidth: '5',
        prefixWidth: '100',
      },
    ]
    };

    let picker = await this.pickerController.create(options);
    picker.columns[0].options.forEach(element => {
      delete element.selected;
      delete element.duration;
      delete element.transform;
    });

    // https://github.com/ionic-team/ionic-framework/issues/17664
    picker.present();
    picker.onDidDismiss().then(async data => {
      let firstColumn = await picker.getColumn(obj.firstColumnName);
      let secondColumn = await picker.getColumn(obj.secondColumnName);
      obj.firstColumnTextValue = firstColumn.options[firstColumn.selectedIndex].text;
      obj.secondColumnTextValue  = secondColumn.options[secondColumn.selectedIndex].text;
      
      obj.firstColumnIndex = firstColumn.selectedIndex;
      obj.secondColumnIndex = secondColumn.selectedIndex;

      //this.checkIfValidateOk();
      
    })
    
    console.log(obj);
    
  }

So when the user click "Valider", I'd like the function to at least true and the best should be to return my object obj, so when it's click I can assign the value to another variable in my main page when I use the function like that :

  async sizePicker() {

    await this.helpService.pickerTwoColumns(this.sizePickerObject).catch(resData => {
      console.log(resData);
    })
  }

But nothing happen in my main code, after clicking "Valider", actually I got the console.log return undefined when I open the function sizePicker whereas I'd like to have something happen when the "Valider" button is pressed...

Thanks for your help.

CodePudding user response：

You can use Promises with async like so. I can't execute your code since I don't have the complete Class, but this should give you the idea.

Note: I didn't modify the validator method, but you can use the approach I outlined below to do validation work in the handler and resolve or throw an error accordingly.

First thing to do is return a Promise in the pickerTwoColumns:

    async pickerTwoColumns(obj: objectTwoColumns ) {
        return new Promise(resolve => {
       
            this.clearObject(obj.firstColumnOptions);
            this.clearObject(obj.secondColumnOptions);

You will then want to resolve the promise in the picker onDidDismiss method --> look for resolve(obj) call


    picker.onDidDismiss()
        .then(async data => {
            let firstColumn = await picker.getColumn(obj.firstColumnName);
            let secondColumn = await picker.getColumn(obj.secondColumnName);
            obj.firstColumnTextValue = firstColumn.options[firstColumn.selectedIndex].text;
            obj.secondColumnTextValue  = secondColumn.options[secondColumn.selectedIndex].text;
            
            obj.firstColumnIndex = firstColumn.selectedIndex;
            obj.secondColumnIndex = secondColumn.selectedIndex;
    
            //this.checkIfValidateOk();
            
            resolve(obj);
        })
        .catch((error)=> {
            //handle error
        })

Finally, I would use this pattern in sizePicker method too. You should resolve the data in the .then method and handle exceptions in .catch