Local Storage in Ionic 2 not able access the data outside then() method

Question

I'm learning Ionic 2. I've stored some data in ionic local storage inside a SomeComponent and retriving the same in UserService to call backend but storage.get() method returns Promise so i can't get data out of it as i learnt about promises. Can anybody assist me better way to get this job done? Thanks if any.

here is my code.

export class SomeComponent {

 user: User;
 usename: string;
 password: string;

   constructor(
    public navParams: NavParams,
    public navController: NavController, 
    public loginService: LoginSevice,
    public storage: Storage) {

   }

    login() {
        this.loginService.login(this.username, this.password).subscribe( response => {
          this.user = response;
          this.storage.set('userId', this.user.userId);
          this.storage.set( 'authcode', this.user.authCode);
        });
      }
}

And the service is

    export class UserService {

      userId: string;
      constructor(public http: Http, public storage: Storage){}

      fetchUserInfo(): Observable<User> { 

          this.storage.get('userId').then((val) => {
            console.log(val); // available only inside then() method
            this.userId = val; 
          });

          let user = btoa(this.userId); // userId is undefined
          return this.http.get(`${this.baseUrl}/user/${user}/details`, {headers: 
               this.headers})
             .map(res =>res.json());
         }
      }
   }

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — eko, May 19 '17 at 11:00
@echonax Hi Sir, Is there any other way to store and retrieve data from local storage in ionic. — Gavishiddappa Gadagi, May 19 '17 at 11:42
I'm not really experienced with ionic. But the official documentation suggest using that so I think that'd be the best. — eko, May 19 '17 at 11:44
@echonax thanks for the immediate reply. can you explain me how to return a promise from then() function that resolve to a string value. — Gavishiddappa Gadagi, May 19 '17 at 11:51

score 2 · Accepted Answer · answered May 19 '17 at 11:57

One way to solve this scenario would be like this:

export class UserService {

    userId: string;
    constructor(public http: Http, public storage: Storage){}

    fetchUserInfo(): Observable<User> { 

        return Observable
            .fromPromise(this.storage.get('userId'))
            .flatMap(userId => 
                this.userId = val;

                let user = btoa(this.userId);
                return this.http.get(`${this.baseUrl}/user/${user}/details`, {headers: this.headers})
                           .map(res =>res.json());
    }
}

This way, we're first creating an observable with the promise that will return the value (userId) from the storage, and then using that userId we're making the http request (that will return the Observable<User>). You can find more information about the flatmap operator here.

score 0 · Answer 2 · answered May 20 '17 at 08:11

I tried with mergeMAp this also works perfectly. I don't know the difference of using both flatMap and mergMap but it works.

export class UserService {
    userId: string;
    constructor(public http: Http, public storage: Storage){}
    fetchUserInfo(): Observable<User> { 
    return Observable
          .fromPromise(this.storage.get('userId')).mergeMap(userId => 
              this.userId = val;
              let user = btoa(this.userId);
              return this.http.get(`${this.baseUrl}/user/${user}/details`, {headers: this.headers})
                               .map(res =>res.json());
    }
}

Local Storage in Ionic 2 not able access the data outside then() method

2 Answers2