Wie aktualisiere ich HTML-Tabelle Beim Aktualisieren von Firebase?

Question

Ich verwende child_added und child_changed. Das hinzugefügte Kind funktioniert einwandfrei, aber child_changed macht ein Duplikat in meiner Tabelle. Bitte helfen Sie mir, dies zu überwinden. Hier ist mein Code:

var rootRef = firebase.database().ref().child("REPORTS").child(date); 

rootRef.on("child_added", function(snapshot){ 
    var date = snapshot.child("dateAndTime").val(); 
    var lat = snapshot.child("latitude").val(); 
    var long = snapshot.child("longitude").val(); 
    var link = snapshot.child("link").val(); 
    var report = snapshot.child("report").val(); 
    var status = snapshot.child("status").val(); 
    var needs = snapshot.child("needs").val(); 


    $("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>"); 

}); 

rootRef.on("child_changed", function(snapshot){ 
    var date = snapshot.child("dateAndTime").val(); 
    var lat = snapshot.child("latitude").val(); 
    var long = snapshot.child("longitude").val(); 
    var link = snapshot.child("link").val(); 
    var report = snapshot.child("report").val(); 
    var status = snapshot.child("status").val(); 
    var needs = snapshot.child("needs").val(); 


    $("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>"); 

}); 

Wie kann ich meine Tabelle aktualisieren, wenn ein bestimmter Wert aktualisiert wurde in Feuerbasis

Answer 1

Statt ein neues HTML-Element anhängen, den Code, der child_changed sollte Update behandelt die bestehendes HTML-Element. Der einfachste Weg, dies zu tun ist, indem sichergestellt wird Sie das HTML-Element geben ein id basierend auf snapshot.key in child_added:

var rootRef = firebase.database().ref().child("REPORTS").child(date); 

rootRef.on("child_added", function(snapshot){ 
    var date = snapshot.child("dateAndTime").val(); 
    var lat = snapshot.child("latitude").val(); 
    var long = snapshot.child("longitude").val(); 
    var link = snapshot.child("link").val(); 
    var report = snapshot.child("report").val(); 
    var status = snapshot.child("status").val(); 
    var needs = snapshot.child("needs").val(); 


    $("#table_body").append("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>"); 

}); 

Dann können Sie das Element durch seine id/Schlüssel in child_changed suchen und aktualisieren:

rootRef.on("child_changed", function(snapshot){ 
    var date = snapshot.child("dateAndTime").val(); 
    var lat = snapshot.child("latitude").val(); 
    var long = snapshot.child("longitude").val(); 
    var link = snapshot.child("link").val(); 
    var report = snapshot.child("report").val(); 
    var status = snapshot.child("status").val(); 
    var needs = snapshot.child("needs").val(); 


    $("#"+snapshot.key).replaceWith("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>"); 

});