javascript - Is there a way to make a realtime ForEach in Firebase? - Stack Overflow

admin管理员组

文章数量:1314039

I have been using ForEach to populate my HTML table.

So far so good but the table is not realtime. I have to reload the function for it to fetch the results again. If I add or delete an entry nothing happens VISUALLY until I reload.

Is there a way to make this realtime? Code from Firebase Docs:

var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  // key will be "ada" the first time and "alan" the second time
  var key = childSnapshot.key;
  // childData will be the actual contents of the child
  var childData = childSnapshot.val();
});
});

Please excuse my poor knowledge on JS, I am working on it.

I have been using ForEach to populate my HTML table.

So far so good but the table is not realtime. I have to reload the function for it to fetch the results again. If I add or delete an entry nothing happens VISUALLY until I reload.

Is there a way to make this realtime? Code from Firebase Docs:

var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  // key will be "ada" the first time and "alan" the second time
  var key = childSnapshot.key;
  // childData will be the actual contents of the child
  var childData = childSnapshot.val();
});
});

Please excuse my poor knowledge on JS, I am working on it.

• javascript
• foreach
• firebase
• firebase-realtime-database

Share Improve this question Follow edited Aug 19, 2016 at 1:15 Frank van Puffelen 600k8585 gold badges889889 silver badges859859 bronze badges asked Aug 18, 2016 at 21:46 Luis RodriguezLuis Rodriguez 52311 gold badge66 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

By using once() you're telling that database that you only want to get the current value and don't care about updates.

The solution to get realtime updates, is to use on(). Since a promise can only resolve once while an on() handler is called for every update, you should use a callback with on():

var query = firebase.database().ref("users").orderByKey();
query.on("value", function(snapshot) {
  snapshot.forEach(function(childSnapshot) {
    // key will be "ada" the first time and "alan" the second time
    var key = childSnapshot.key;
    // childData will be the actual contents of the child
    var childData = childSnapshot.val();
  });
}, function(error) {
  console.error(error);
});

If you care about updating a UI in response to such updates, you'll probably want to use child_ handlers. These get called one level lower in your JSON tree, so in your case for each user that is added/changed/deleted. This allows you to update the UI more directly. For example, the child_added event for the above could be:

var query = firebase.database().ref("users").orderByKey();
query.on("child_added", function(snapshot) {
    var key = snapshot.key;
    var data = snapshot.val();
    // TODO: add an element to the UI with the value and id=key
  });
}, function(error) {
  console.error(error);
});

Now you can handle the other events with:

query.on("child_changed", function(snapshot) {
  // TODO: update the element with id=key in the update to match snapshot.val();
})
query.on("child_removed", function(snapshot) {
  // TODO: remove the element with id=key from the UI
})

This and much more is covered pretty extensively in our guide for web developers and in the reference documentation.

本文标签： javascriptIs there a way to make a realtime ForEach in FirebaseStack Overflow