How to get value from asynchronous local storage function and pass it to modal ionic 2

Question

I am fetching value from local storage and pass it to modal. In code bellow console.log(obj); line in the code prints initial value of the obj which is {selectedRadious: 500, DistanceUnit: 'Meters'} as this.storage.get() is asynchronous function. How to handle it to get local storage value?

let obj =  {selectedRadious: 500, DistanceUnit: 'Meters'};

this.storage.get('lastSetValue').then((val) => {

  if(val.selectedRadious){
    this.selectedRadious = val.DistanceUnit;
  }

  if(val.DistanceUnit){
    this.DistanceUnit = val.DistanceUnit;
  }

  obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
})
.catch(err=>{
});

console.log(obj);
let myModal = this.modalCtrl.create(SettingModalPage, obj);

myModal.onDidDismiss(data => {
console.log('modal value: '+data.DistanceUnit)
this.DistanceUnit = data.DistanceUnit;
this.selectedRadious = data.selectedRadious;

let objValue = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};

this.storage.set('lastSetValue', objValue);
});
 myModal.present();

score 2 · Accepted Answer · edited May 23 '17 at 12:25

As I have answered it here : Can't resolve all parameters for Storage: (?)

You need to move the code where you are accessing the values from a resolved promise into the .then() of that promise. Since, it is async operation, by the time you use it, it might not be available.

E.g. this could work:

presentModal() {
    this.storage.get('distUnit').then((val) => {
        console.log('Your distUnit is', val);
        this.DistanceUnit = val;
        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    })
    .catch(err=>{
        console.log('Your distUnit dont exist: ' + JSON.stringify(err));
        this.DistanceUnit = 'Meters';

        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    });
}

modalCreator(){
    let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
    let myModal = this.modalCtrl.create(SettingModalPage, obj);

    myModal.onDidDismiss(data => {
        console.log('modal value: '+data.DistanceUnit)
        this.DistanceUnit = data.DistanceUnit;
        this.selectedRadious = data.selectedRadious;

        this.storage.set('distUnit', this.DistanceUnit);
        this.storage.set('SetRadious', this.selectedRadious);
    });
    myModal.present();
}

If you read the code carefully, you will get to know that I have handled all the cases for getting both the parameters and if one of them fails. Check it out and let me know.

How to get value from asynchronous local storage function and pass it to modal ionic 2

1 Answers1