title: Firebase data returning an UNDEFINED value even though it has content
body: <p>Coming from my <a href="https://stackoverflow.com/questions/45553607/cannot-change-the-global-variable-using-the-firebase-method-foreach-in-javascri">recent question</a> in this site (before I resort to the "Promise" technology), I came up an idea of storing the variable in the firebase database instead of making it a global var in the javascript so that I can use it in any function (even though in an asynchronous one). So I made this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function logIn(){
   var loggedUname = $("#loginUname").val();
   var loggedPword = $("#loginPword").val();
   
   var tailorRef = firebase.database().ref('tailors');
   var keyRef = firebase.database().ref();
   
   tailorRef.on('value', function(data){
    data.forEach(function(childData){
     if ( (loggedUname == childData.val().tUsername) &amp;&amp; (loggedPword == childData.val().tPassword) ){
      currentKey = childData.key;
     }
    });
    keyRef.update({currentTailor: currentKey});
    alert("key = " + keyRef.currentTailor);
   });
   
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the .update method was successful since it stored the corresponding key for the logged in user:</p>
  
  <p><a href="https://i.stack.imgur.com/uI01E.png" rel="nofollow noreferrer">the updated database</a></p>
  
  <p>but when I try to retrieve it using alert, it says UNDEFINED! I don't understand because I'm assuming that I'm calling from the root reference of the database, that's as low as I go.</p>
  
  <p>I tried making a seperate .on() function for the keyRef, but it's still the same result.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>keyRef.on('value', function(data){
    alert(data.currentTailor);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Did I called the data in a wrong way?  </p>