CODEWITHSUNDEEP
angularionic-frameworkionic2
Yasir Panjsheri
Yasir Panjsheri

Reputation: 21

Setting and Getting Object from Storage in Ionic 2

I have this sample login page where I am trying to store the returned object of data (user data) to a storage so I can get it and use it in other pages... since the data is in form of JSON Object (array) ... I'm not sure how this is done, I tried stringify it but something is wrong!

login.ts:

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

  login: {username?: string , password?: string} = {};
  submitted = false;
  loginDetails: any;

  constructor(public navCtrl: NavController, private schoolAppUsers: SchoolAppUsers, public userData: UserData, public storage: Storage, public globalService: GlobalService ) {

    this.globalService=globalService;
    this.schoolAppUsers=schoolAppUsers;
    this.userData=userData;
  } 

  onLogin(form) {

  this.submitted = true;

  if (form.valid) {

    this.schoolAppUsers.login(this.login)
      .then(loginDetails => {

        this.loginDetails = loginDetails;
        this.navCtrl.setRoot(TabsPage);
        // console.log(loginDetails);
      });

    this.userData.login(this.login.username);
    this.userData.loginDetails(this.loginDetails);

  }
}

when I console log: //console.log(loginDetails); this is the output (object):

[{"error":"false","UserID":1,"name":"yasir","username":"yasir12","password":"123","role":1}]

So I'm trying to pass it: this.userData.loginDetails(this.loginDetails);

userData.ts:

@Injectable()
export class UserData {
  constructor(public events: Events, public storage: Storage) {}

  loginDetails(loginDetails) {
    this.setLoginDetails(loginDetails);
  };

  setLoginDetails(loginDetails) {
    this.storage.set('loginDetails', JSON.stringify(loginDetails));
  };

  getLoginDetails() {
    return this.storage.get('loginDetails').then((value) => {
      return value && JSON.parse(value);
    });
  };

This is how I am trying to get in other pages, which when I console log it returns null or undefined

 loginDetails: any;

 ngAfterViewInit() {
   this.getUserdetails();
 }

 getUserdetails() {
   this.userData.getLoginDetails().then((loginDetails) => {
     this.loginDetails = loginDetails;
     console.log(this.loginDetails);
   });
}

Can someone please help!

Upvotes: 1

Views: 921

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

if (form.valid) {

          this.schoolAppUsers.login(this.login)
         .then(loginDetails => {

          this.loginDetails = loginDetails;
          this.navCtrl.setRoot(TabsPage);
            // console.log(loginDetails);
        });

          this.userData.login(this.login.username);
          this.userData.loginDetails(this.loginDetails);

  }

This is the problem . your promise.then() is asynchronous. you are trying to save loginDetails in userData even before it is set in this.loginDetails. you should do:

 this.userData.loginDetails(this.loginDetails);

inside the then method of login.

UPDATE change

 return value && JSON.parse(value);

to 

 return value || JSON.parse(value);

Upvotes: 2

Related Questions