Ionic 2 / Angular 2 - Getting undefined value from global variable

Question

I am facing a weird issue, I am getting undefined in a global variable which I want to use it later. I have put 2 console.log(), the tricky part is Check 2 (as console.log output) fires first instead of Check 1 ). Please have a look at the TS file. In the Check 1, I get the value correctly but it fires after the setRadioButton method, I am little confused as to why it happens like that?

import { Component } from '@angular/core';
;import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})
export class ProfilePage {
  userImg : any;
  userName : string;
  profileType :string;
  instr : boolean;
  stud :boolean;
  constructor(public navCtrl: NavController, private nativeStorage : NativeStorage) {
    this.nativeStorage.getItem("userLogin").then((data)=>{
       this.userImg = data.picture;
       this.userName = data.name;
    }).catch((c)=>console.log(c));
    this.nativeStorage.getItem("userProfile").then((data)=>{
      this.profileType = data.userProfileType; 
      console.log("Check 1",this.profileType);    
   }).catch((c)=>console.log(c));
   this.setRadioButton()
  }

  setRadioButton()
  {
    console.log("Check 2",this.profileType); 
    if(this.profileType == "Instructor")
    {
      this.instr = true;
      console.log("I")
    }
    if(this.profileType == "Student"){
      this.stud = true;
      console.log("S")
    }
  }
}

And the console log output

FCMPlugin.js: is created
FCMPlugin.js:41 FCMPlugin Ready OK
bootstrap.js:10 Ionic Native: deviceready event fired after 1822 ms
index.js:411 DEVICE READY FIRED AFTER 1738 ms
profile.ts:29 Check 2 undefined
profile.ts:22 Check 1 Instructor

Its because this.profileType is defined in an asynchronous context, so in the check 1 you see it printed because the console.log is in the promise where you have acces to it, the check 2, not — Constantin Guidon
– Constantin Guidon, Commented Jan 15, 2018 at 16:23

dlcardozo · Accepted Answer · 2018-01-15 16:27:19Z

1

It's a matter of timming, you have two async calls and then you have your this.setRadioButton(), this function will run before the other two async calls.

If you want to run this.setRadioButton() after your profile.ts:22 Check 1 Instructor, let's change that code to do what you want.

constructor(public navCtrl: NavController, private nativeStorage : NativeStorage) {
    this.nativeStorage.getItem("userLogin").then((data)=>{
       this.userImg = data.picture;
       this.userName = data.name;
    }).catch((c)=>console.log(c));
    this.nativeStorage.getItem("userProfile").then((data)=>{
      this.profileType = data.userProfileType; 
      console.log("Check 1",this.profileType);    
      this.setRadioButton(); // HERE, this is what you want.
   }).catch((c)=>console.log(c));

  }

answered Jan 15, 2018 at 16:27

dlcardozo

4,0231 gold badge21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic 2 / Angular 2 - Getting undefined value from global variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related