如何使用Firebase实时数据库检查html表中是否已存在数据? [英] how to check if data is already in html table using firebase real time database?

问题描述

我在由javascript生成的HTML表中的数据库数据上有一个实时侦听器，当我添加新条目或删除旧条目时，表中以前的数据将被复制.

I have a live listener on my database data in my HTML table that is generated by javascript and when I add a new entry or delete an old entry, the data that was previously in the table gets duplicated.

var database = firebase.database().ref().child('transactions');
            database.on('value', function(snapshot){
                if(snapshot.exists()){
                    var content = '';
                    snapshot.forEach(function(data){
                        var CustomerName = data.val().CustomerName;
                        var AmountSent = data.val().AmountSent;
                        var TimeEffected= data.val().TimeEffected;
                        var DateEffected = data.val().DateEffected;
                        var Successful = data.val().Successful;

                        content += '<tr>';
                        content += '<td>' + CustomerName + '</td>';//column2
                        content += '<td>' + AmountSent + '</td>'; //column1 
                        content += '<td>' + TimeEffected + '</td>'; //column1 
                        content += '<td>' + DateEffected + '</td>'; //column1
                        content += '<td>' + Successful + '</td>'; //column1
                        content += '</tr>';
                    });
                    $('#ex-table').append(content);

当它是"database.once"并且我有一个刷新按钮时，我不会重复数据，但是我将其更改为"database.on"，现在只要执行任何操作，表中的数据就会重复数据库.

When it 'was database.once' and I had a refresh button I wouldn't get the data duplicated but I've changed it to'database.on' and now the data in the table duplicates whenever I do anything to the database.

我正在寻找最具成本效益的方法. 我不确定'database.once'或'database.on'中的哪一个省钱.

I'm looking for the most cost-effective way. I'm not sure which one of both 'database.once' or 'database.on' save money.

推荐答案

由于您监听transactions上的value事件，因此每次调用回调时，快照将包含transactions下的所有数据.因此，所有未更改的数据也将出现在快照中，从而导致该快照多次出现在您的表中.

Since you listen to the value event on transactions, each time your callback is called the snapshot will contain all data under transactions. So any data that wasn't changed will also be in the snapshot, leading to it being in your table multiple times.

我看到两个选择:

1. 每次获取更新数据时都要擦拭表格
2. 执行更细粒度的更新

每次获取更新数据时都要擦拭表

这是最简单的，因为它需要对现有代码进行最少的更改.只要您从数据库中获取更新的数据，只需清除表中的内容即可:

Wipe the table each time you get updated data

This is the simplest, since it requires the fewest changes to your existing code. Just clear the contents from the table whenever you get updated data from the database:

var database = firebase.database().ref().child('transactions');
database.on('value', function(snapshot){
    $('#ex-table').empty(); // clear existing contents
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var CustomerName = data.val().CustomerName;
            var AmountSent = data.val().AmountSent;
            var TimeEffected= data.val().TimeEffected;
            var DateEffected = data.val().DateEffected;
            var Successful = data.val().Successful;

            content += '<tr>';
            content += '<td>' + CustomerName + '</td>';//column2
            content += '<td>' + AmountSent + '</td>'; //column1 
            content += '<td>' + TimeEffected + '</td>'; //column1 
            content += '<td>' + DateEffected + '</td>'; //column1
            content += '<td>' + Successful + '</td>'; //column1
            content += '</tr>';
        });
        $('#ex-table').append(content);

这应该可以正常工作，但是每次其中的任何更改都会重新绘制整个表的内容.桌子很大时，这可能会导致明显的闪烁.

This should work fine, but repaints the entire table contents every time anything in there changes. This may result in noticeable flicker when the table is large.

替代方法是执行更细粒度的更新. IE.最初，您添加所有子项，之后仅添加新的子项，删除从数据库中删除的所有数据，等等.

The alternative is to perform more fine-grained updates. I.e. initially you add all children, after that you only add the new children, remove any data that gets removed from the database, etc.

Firebase为此具有特定的事件，这些事件在数据库中触发低一级的事件.例如，child_added事件定义为首先对引用下的每个节点触发，然后每次在引用下添加节点时触发".同样，有child_removed，child_changed和child_moved事件.通过这些事件，您可以对表执行更详细的更新.

Firebase has specific events for this purpose, which fire one level lower in the database. For example, the child_added event is defined as "fires initially for each node under the reference, and then each time a node is added under the reference". In the same vein there are child_removed, child_changed and child_moved events. With these events you can perform more granular updates to the table.

例如，以下是处理child_added的方法:

For example, here's how you'd handle child_added:

var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';
    content += '<td>' + data.AmountSent + '</td>';
    content += '<td>' + data.TimeEffected + '</td>';
    content += '<td>' + data.DateEffected + '</td>';
    content += '<td>' + data.Successful + '</td>';
    content += '</tr>';

    $('#ex-table').append(content);
});

除了稍微清理代码外，我还将snapshot.key添加到tr中.这样一来，您就可以稍后在键行中查找，以防万一收到child_changed或child_removed事件.

Aside from cleaning up the code a bit, I also add the snapshot.key to the tr. This allows you to later look up the row for a key, just in case you get a child_changed, or child_removed event.

例如，以下是从数据库中删除该行时如何从表中删除该行:

For example, here's how to remove the row from the table when it gets removed from the database:

database.on('child_removed', function(snapshot){
    $('#'+snapshot.key).remove()
});

这篇关于如何使用Firebase实时数据库检查html表中是否已存在数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！