Gibt es eine Möglichkeit, eine Echtzeit ForEach in Firebase zu machen?

Question

Ich habe ForEach verwendet, um meine HTML-Tabelle zu füllen.

So weit so gut, aber der Tisch ist nicht in Echtzeit. Ich muss die Funktion neu laden, damit die Ergebnisse erneut abgerufen werden können. Wenn ich einen Eintrag hinzufüge oder lösche passiert nichts VISUELL bis ich neu lade.

Gibt es eine Möglichkeit, diese Echtzeit zu machen? -Code aus 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(); 
}); 
}); 

Bitte mein armes Wissen über JS entschuldigen, ich arbeite daran.

Answer 1

Indem Sie once() verwenden, sagen Sie dieser Datenbank, dass Sie nur den aktuellen Wert erhalten möchten und sich nicht um Updates kümmern.

Die Lösung für Echtzeit-Updates ist die Verwendung von on(). Da ein Versprechen nur einmal lösen kann, während ein on() Handler für jedes Update aufgerufen wird, sollten Sie einen Rückruf mit on() verwenden:

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); 
}); 

Wenn Sie kümmern sich um eine Benutzeroberfläche in Reaktion auf eine solche Updates zu aktualisieren, werden Sie wahrscheinlich wollen zu verwenden child_ Handler. Diese werden in Ihrem JSON-Baum eine Stufe niedriger aufgerufen, in Ihrem Fall also für jeden Benutzer, der hinzugefügt/geändert/gelöscht wird. Dadurch können Sie die Benutzeroberfläche direkter aktualisieren. Zum Beispiel könnte das child_added Ereignis für die oben sein:

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); 
}); 

Jetzt können Sie die anderen Ereignisse behandeln mit:

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 
}) 

Dies und vieles mehr ist ziemlich ausführlich in unserer guide for web developers bedeckt und in den reference documentation .