ionic 2 storage not working with variables

Question

I am not sure what the problem is here but i can't return a value. I do not want to use sqlite right now.

 doLogin(event){
    this.storage.get('user').then((val) => {
      this.username=val;
      console.log(this.username);
      console.log(val);
  });

}

The problem is the 1st log returns undefined but the second log is returning the correct values.

Edit : Really sorry guys. Both the logs are working fine. But the log mentioned below is not working. This is causing the if statement to return false even though all the values match Full code for the file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, Validators } from '@angular/forms';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'login',
  templateUrl: 'login.html'
})
export class LoginPage {

   username: string;
   password: string;

  public loginForm = this.fb.group({
    password: ["", Validators.required],
    user: ["", Validators.required],

  });

  constructor(public navCtrl: NavController, public fb:FormBuilder, public storage:Storage) {

  }


  doLogin(event){
    this.storage.get('user').then((val) => {
      this.username=val;
      console.log( this.username);
      console.log(val);
  });

  this.storage.get('password').then((val) => {
       this.password=val;
  });
  console.log(this.username); //NOT WORKING
      if( this.username == this.loginForm.get('user').value &&  this.password == this.loginForm.get('password').value)
          {
            console.log("Login Successful");
          }


  }

could you console error in catch function and specify the error message on first log? — Surya Teja, Jun 03 '17 at 05:45
It's not giving me an error. It's just logging undefined when i `console.log(this.username)` — Ujjwal Maheshwari, Jun 03 '17 at 05:53
what is the source of storage I mean native storage or any database? — Surya Teja, Jun 03 '17 at 05:57
Code looks fine. Please share more/complete function code. It looks like you have done some assignment to this.username variable and have not shared that code. — Yuvraj Patil, Jun 03 '17 at 06:18
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — eko, Jun 03 '17 at 06:41
Promises are asynchronous..that console log statement is likely called before the db returns val. You can do this operation within `then` — Suraj Rao, Jun 03 '17 at 06:42
@UjjwalMaheshwari we can use Observable in this case, because we have 2 promises so we have to make sure all of it have to finish before we compare it. Take a look my answer below, the code inside doLogin function. — Thien Hoang, Jun 03 '17 at 07:11

score 2 · Answer 1 · answered Jun 03 '17 at 07:13

Promises are asynchronous..that console log statement is likely called before the db returns val. You can do this operation within then

If you are using promises, you can use Promise.all

let userCredentials = [this.storage.get('user'),this.storage.get('password')];
Promise.all(userCredentials).then(values =>{
  this.username = values[0];
  this.password = values[1];
   if( this.username == this.loginForm.get('user').value &&  this.password == this.loginForm.get('password').value)
      {
        console.log("Login Successful");
      }
});

Promise.all will call the array of promises and wait till all return.

Thien Hoang · Answer 2 · 2017-06-03T07:09:38.693

0

We can use Observable from RxJs to check 2 promises from storage finish.

Observable.forkJoin([
   Observable.fromPromise(this.storage.get('user')), 
   Observable.fromPromise(this.storage.get('password'))
])
.subscribe(data=> {
    this.username = data[0];
    this.password = data[1];
    if (this.username == this.loginForm.get('user').value &&  this.password ==this.loginForm.get('password').value){
        console.log("Login Successful");
    }
});

edited Jun 03 '17 at 07:09

answered Jun 03 '17 at 07:01

Thien Hoang

625
3
12

1

Why using observables instead of just `Promise.all([...]).then((results) => {...})`? – sebaferreras Jun 03 '17 at 07:13
1

@sebaferreras sure we can do it with Promise, just try to get familar with Observable , thanks . – Thien Hoang Jun 03 '17 at 07:23

ionic 2 storage not working with variables

2 Answers2