Menu
i want to create five new directories in Firebase dynamically. Also i want to insert data in those directories dynamically. I wrote this jquery script for that purpose.
for(var i=0; i<5; i++) {
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', function (snapshot) {
var tempdata = snapshot.val();
if (!tempdata) {
tempdata=50;
dataRef.set(tempdata);
}
});
}
but instead of creating multiple directories, it just create one directory (in fact the last one) (pic below)...
I just don't understand why this is happening. Pls help. Any kind of help would be appreciated. Thanks in advance.
922
Firebase doesn't really have directories, but instead everything is a JavaScript object. This means that the closest thing to a directory is a key that contains another object :)
In other words, I'm assuming you want to see something like this in Forge:
To make your Firebase look like that, you can create a JavaScript object locally and save it to the root node using set. You can then use the read callback value to listen for changes. Here's the code that implements this:
<html>
<head>
<script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>
</head>
<body>
<script>
/* Write 5 numbered objects, each set to 50 */
// Create a new Firebase data reference to the root
var dataRef =
new Firebase('https://test-firebase-please-ignore.firebaseio.com/');
// Create a JavaScript object to hold stuff
var tempData = {};
// Add 5 things to it
for(var i=0; i<5; i++) {
tempData[i] = {value: 50};
}
// Save it to Firebase
dataRef.set(tempData);
/* Meanwhile, create a listener that gets updates when the data changes */
dataRef.on('value', function(snapshot) {
// Log the whole thing
console.log(snapshot.val());
});
</script>
</body>
</html>
This is a classic case of asynchronicity working against your instincts.
When you call dataRef.on('value', it may reach out to the server to get that value for you. That operation may take a long time, so instead of waiting for the result (which would block the browser) the optation instead calls you back when the value is available.
Unfortunately by the time the callback function gets invoked, you've changed the dataRef value to point to something else: the last dataRef 4.
It's like your code executes in this order:
var i = 0
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };
// Your callback is not invoked immediately, but only once the server returns the value.
// But in the meantime your main code continues with the next iteration through the loop
i = 1;
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };
// Same as before: we're now waiting for 2 values to become available
i = 2;
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };
// Let's say that all values becomes available at this point, so your callback code executes
function (snapshot) {
var tempdata = snapshot.val();
if (!tempdata) {
tempdata=50;
dataRef.set(tempdata);
}
});
function (snapshot) {
var tempdata = snapshot.val();
if (!tempdata) {
tempdata=50;
dataRef.set(tempdata);
}
});
function (snapshot) {
var tempdata = snapshot.val();
if (!tempdata) {
tempdata=50;
dataRef.set(tempdata);
}
});
Note that line dataRef.set in all three cases? At this point the single variable dataRef refers to the object at ref 2. You end up setting a value to the same ref three times.
A simple solution is to simply always set the value:
for(var i=0; i<5; i++) {
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
var tempdata=50;
dataRef.set(tempdata);
}
Jenny Murphy's approach will also work fine btw. As will capturing the different dataRef values in a so-called closure (google for javascript closure or immediately invoked function expression to learn more).
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
