Firebase data returning an UNDEFINED value even though it has content

Question

Coming from my recent question 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:

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) && (loggedPword == childData.val().tPassword) ){
    currentKey = childData.key;
   }
  });
  keyRef.update({currentTailor: currentKey});
  alert("key = " + keyRef.currentTailor);
 });
 
}

the .update method was successful since it stored the corresponding key for the logged in user:

the updated database

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.

I tried making a seperate .on() function for the keyRef, but it's still the same result.

keyRef.on('value', function(data){
  alert(data.currentTailor);
});

Did I called the data in a wrong way?

I don't know Firebase, but I'll bet `keyRef.update()` is asynchronous. — Barmar, Aug 08 '17 at 06:39
https://firebase.googleblog.com/2016/01/keeping-our-promises-and-callbacks_76.html try using the .then(function(){ alert()}) way — Ayudh, Aug 08 '17 at 08:00
@Barmar I used the .update() in my signUp function and I succesfully retrieved the data that were stored in this login() function. If it were what you said, I shouldn't have able to retrieve the tUsername and tPassword in this function — Kaddy03, Aug 08 '17 at 09:51

score 0 · Accepted Answer · edited Aug 09 '17 at 19:01

The correct way would be:

keyRef.on('value', function(data){
 //  alert(data.val().currentTailor); see the difference 
     console.log('currentTailor ==>', data.val().currentTailor);
});

alert() in javascript is not recommended as it freezes your page. Use console instead. This way you can see your logs in browser's console (in chrome press Ctrl+Shift+J)

Firebase's on() method returns the callback function . To get the data object, you have to use val() method on that return value. Then you can get any value using corresponding key.

 keyRef.on('value', function(data){
// here data is callback function
});

keyRef.on('value', function(data){
//data.val() returns the data in object form
});
 keyRef.on('value', function(data){
 // data.val().currentTailor to access currentTailor attribute
 });

You can console each of them to see what is the return values.

oh, it worked! I always thought that when you have a single value in the root , I won't need the .val() and can call it directly with it's value name. I was wrong. thank you. — Kaddy03, Aug 09 '17 at 02:00

Firebase data returning an UNDEFINED value even though it has content

1 Answers1

Linked