Ionic storage read/write issues

So I am using ionic storage to read something out of the storage and if the value to the key is empty i want to then set that value, and make another check(get) to see if the value was set. However, I am having a difficult time understanding promises so I considered wrapping the promise with an observable. However The issue that I am still running into is the data that is being returned is very confusing. The data is an object and before execution the object has two keys {__zone_symbol__state:true, __zone_symbol__value:array{0}} and after i guess the promise is finished i get {__zone_symbol__state:true, __zone_symbol__value:‘Current datetime’} which is exactly what im hoping for. However, due to the inability to understand the object or even how the promise is working, my if/else statement to capture the '__zone_symbol__value:…" are inadequete because Im using the if/else to determine which rootpage to go to.

below is the code in my provider/service:
getLoginStatus(){

let myObservable = Observable.create(observer => {
  console.log('observer is setup');

  observer.fromPromise(this.storage.get('loginStatus'));
});

myObservable.subscribe((data) => {
this.getData = data;
console.log(this.getData);
});
return this.getData;

}

below is the code in my app.component.ts:

platform.ready().then(() => {

  //this.StartupProvider;
  this.getData = this.LoginStatusProvider.getLoginStatus();
  console.log(this.getData.__zone_symbol__value);
  if(this.getData.__zone_symbol__value[0] == '')
  {
     this.LoginStatusProvider.setLoginStatus();
     this.rootPage = RetrieveDataPage;
  }
  else if (this.getData.__zone_symbol__value[0] != ''){
    console.log('Skipped the if');
    this.rootPage = LoginPage;

  }

Wow, interesting, what You’ve done here :smile:.

You should avoid using the __zone_symbol__value variables. Instead, You should use provided functions.

I 'm assuming that You’re using the Ionic Storage, right? If yes, try following.

Note, that the Ionic Storage returns Promises, from which You can get the value of Your key.

/** get the key 'loginStatus' from the local storage */
this.storage.get('loginStatus').then((value: any) => {
    console.log('loginStatus key holds the following value in the local storage', value);

    /** if the value is set */
    if (value) return;

    /** if the value is not set */
    this.yourVariable = value;
    return;
}).catch((errorGet: any) => {
    console.error(errorGet);
    return;
});

Please take a close look into the docs.

Cheers
Unkn0wn0x

So the code you provided has worked and im still trying to figure out why it works when you explicitly give a variable in .then(variable:any) a type compared to not giving it anything.

However I am now in having trouble with inserting and retrieving an array of objects from the storage. My code remains the same for insert using this.storage.set('directory,myarrayOfObjects); and i did a console.log before this statement to see my array and it is fully loaded however when i use the code you provided to retrieve it from local storage, i get an empty array back.

Any help or tips on this?

I think You should have a look into javascript promises, to understand, how and why they are working. Here You have some usefull pages:

In typescript it’s not required to give a type, it’s a personal preference how to write code. You could also write something like .then(value => { } );.

Can You provide Your code for this case?

Cheers
Unkn0wn0x

Thanks for the reply. Below is the code i have so far. It includes my calls to firebase, placing the return value from firebase into my own variable and then the call to localhost and placing the array in my variable into the key ‘directory’ in my localhost. However, this does not work. When i do a .get(‘directory’), i always get an empty [ ] array back.

Firebase Call:

  getDirectoryFirebase(){
    this.firebaseProvider.getDirectoryItems()
    .subscribe(elementsInFBDirectory => {
      //console.log(elementsInFBDirectory);
      elementsInFBDirectory.forEach(item =>{
        this.directoryStorage[this.i] = item;
        this.i = this.i + 1;
      });
    });
    console.log(this.directoryStorage);
    return this.directoryStorage;
  }

Call to LocalStorage: (I have tried this method both without and with async/await)

async  saveDirectory2Local(){
    console.log(this.directoryStorage);//The variable 'directoryStorage' holds the array from method above
    await this.storage.set('directory',this.directoryStorage);
  }

Method to test if it local storage did the set, I used the same solution you had provided:

 this.storage.get('directory').then((value: any) => {
    console.log('The Directory should be array of objects in the variable value', value);

    if (value) 
         return;

    this.getData = value;
    console.log(this.getData);
    return;
}).catch((errorGet: any) => {
    console.error(errorGet);
    return;
});

LEt me know if this all clear. I am actively working on this and trying to figure out why my array is always empty. Hence why i placed a console.log() in my .set() method before the call to localstorage to make sure the array is not empty and it never is.

In Your Firebase Call - Function at the third line from the bottom, console.log(this.directoryStorage);, does the variable at this point has the correct value?

Do You check, if Your storage is ready / available? Somethink like this:

this.storage.ready().then(() => {
    /** set / get some data from the local storage */
}).catch((error: Error) => {
    console.error(error);
    return;
})

How Your functions depend on each other? What is Your “programatically” order to execute these functions?

Do You checked, for example in Your browser, if the data is available? For Chrome, go to:

  • Developer-Console -> Tab “Application” -> IndexedDB or WebSQL" and check the entries there.

I could bet, You have a timing problem, that the .forEach() loop is not finished, before You are storing the “unfinished” variable into the local storage.

You could also try to catch the error - if existent - for the local storage setter.

protected saveDirectory2Local(): void {

        console.log(this.directoryStorage);

        this.storage.set('directory', this.directoryStorage).then(() => {
            console.log('directory stored successfully into the local storage');
            return;
        }).catch(error: Error) {
            console.error);
            return;
        }

    }

Let me know, if You need further support.

Cheers
Unkn0wn0x