0

I've following Javascript code snippet :

authData=ref.getAuth();

if(authData == null){
    //TODO find an elegant way to manage authorization 
    //  window.location = "../index.html";
} else {
      ref.child("users").child(authData.uid).on("value", function(snapshot){
      $( "span.user-name").html(snapshot.val().displayName);    
      loggedInUser.displayName = snapshot.val().displayName;
      //alert("Name inside : "+loggedInUser.displayName);
      //Here it displays the value      
    });         
}

alert("Nameada is out : "+loggedInUser.displayName);
//Here it shows 'undefined'

why?

I want to use the variable value loggedInUser.displayName where did I shown alert.

Can someone please help me in accessing the value and displaying the alert?

Thanks.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
PHPLover
  • 1
  • 51
  • 158
  • 311
  • are you sure that authData really isn't null? the getAuth() call could return null and then that variable is never initialized. – yelsayed May 06 '16 at 11:03
  • I don't see a declaration for the `loggedInUser` variable. Where is it? Your variable might be outside the correct scope. – code_dredd May 06 '16 at 11:03
  • @YasserElsayed, ray : all these things are present and have been initialized in other code files which also have been included. Please don't worry about it and consider they are working. – PHPLover May 06 '16 at 11:06

1 Answers1

4

Your final alert is executed when the callback function (function(snapshot){ ... }) has not yet been called. Note that the callback function is called asynchronously, so it only gets executed after the currently running code has completed and the value event is triggered.

This also explains why the inner (commented out) alert does work. Just realise that this piece of code (the call back function) is executed later than the other alert, even though it occurs earlier in your code.

You could "solve" it by calling another function from within the call back, like this:

authData=ref.getAuth();

if(authData == null){
    //TODO find an elegant way to manage authorization 
    //  window.location = "../index.html";
} else {
    ref.child("users").child(authData.uid).on("value", function(snapshot){
        $( "span.user-name").html(snapshot.val().displayName);    
        loggedInUser.displayName = snapshot.val().displayName;
        whenUserLogged();
    });         
}

function whenUserLogged() {
   alert("Name : "+loggedInUser.displayName);
   // anything else you want to do....
}

Some suggestions for improvement

Don't use too many global variables (in your code all of them are global), and instead pass variables as function arguments.

You may want to look into promises.

Community
  • 1
  • 1
trincot
  • 317,000
  • 35
  • 244
  • 286
  • Tell me how should I access the variable? – PHPLover May 06 '16 at 11:07
  • You can access the variable inside the callback function. Alternatively, you can call a function at that place, and output the variable in that new function. – trincot May 06 '16 at 11:09