Attempting to read variables from Firebase with Javascript

Question

I'm trying to access a simple Firebase database (https://blazing-fire-6348.firebaseio.com) and store its values separately, but they're not storing properly. The code below spits out all 10's, rather than the values stored in Firebase. I don't think my issue is just scope, but Firebase syntax. The tilde's are the website url, stackoverflow just wouldn't let me post the link multiple times.

Thanks for any help you can provide.

var a = 10; var b = 10; var c = 10;

var dataRef = new Firebase("~~~/a");
dataRef.on('value', function(snapshot) { 
   a = snapshot.val();
   // alert(a);
 });
var dataRef = new Firebase("~~~/b");
dataRef.on('value', function(snapshot) { if(snapshot.val() != null){
    b = snapshot.val();
   // alert(b);
} });
var dataRef = new Firebase("~~~/c");
dataRef.on('value', function(snapshot) { if(snapshot.val() != null){
    c = snapshot.val();
    // alert(c);
} });

alert(a); alert(b); alert(c);`

`

If you enable the commented out alerts, those will show the correct values. Did you try? — Frank van Puffelen
– Frank van Puffelen, Commented Mar 5, 2014 at 2:01
Yes, they will. I'm looking for a way to access the variables outside of the dataRef.on function. — James
– James, Commented Mar 5, 2014 at 3:26
As the alerts at the bottom show, you can access the variables anywhere. But they won't have the value from remote Firebase, until after the dataRef.on('value' callback fires. It comes from the asynchronous nature of AJAX calls. Given that the behavior you are seeing is completely expected, maybe you can describe in another way what you are trying to accomplish. — Frank van Puffelen
– Frank van Puffelen, Commented Mar 5, 2014 at 12:02

Frank van Puffelen · Accepted Answer · 2014-03-05 12:19:03Z

Your problem stems from the fact that the on call in Firebase is asynchronous:

var dataRef = new Firebase("~~~/a");
dataRef.on('value', function(snapshot) { 
    // this code will only execute once the server *returns* a value for a
});
// this code will execute straight after the call to the server has *started*

Your code will trigger three calls to the Firebase server, each of which can take some varying time to complete.

Therefore you cannot simply alert all three results at the end of the script and expect them to have the value from the server. All you know at the point in the script is that all calls to the server have started. There is no guarantee that any or all of them have completed though.

Instead you'll have to use a strategy to determine when all calls have completed.

A simple way to do this in your example:

var a, b, c;

var dataRef = new Firebase("~~~/a");
dataRef.on('value', function(snapshot) { 
   a = snapshot.val();
   if (a && b && c) alert(a+b+c);
 });
var dataRef = new Firebase("~~~/b");
dataRef.on('value', function(snapshot) { if(snapshot.val() != null){
    b = snapshot.val();
   if (a && b && c) alert(a+b+c);
} });
var dataRef = new Firebase("~~~/c");
dataRef.on('value', function(snapshot) { if(snapshot.val() != null){
    c = snapshot.val();
   if (a && b && c) alert(a+b+c);
} });

Each callback (the function that receives the snapshot, that you pass into on) check whether the others have also completed. Only when all values have been set, will it alert their sum.

Note that this (very excellent) example will only trigger the alert if none of the values are null.

Collectives™ on Stack Overflow

Attempting to read variables from Firebase with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related