Как проверить, если данные уже в HTML-таблице, используя базу данных Firebase в режиме реального времени?

Question

У меня есть живой прослушиватель данных моей базы данных в моей таблице HTML, сгенерированных javascript, и когда я добавляю новую запись или удаляю старую запись, данные, которые ранее были в таблице, дублируются.

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», и теперь данные в таблице дублируются, когда я что-то делаюв базу данных.

Я ищу наиболее экономически эффективный способ.Я не уверен, какой из «database.once» или «database.on» сэкономит деньги.

Answer 1

Поскольку вы прослушиваете событие value на transactions, каждый раз, когда ваш обратный вызов вызывается, снимок будет содержать все данные в transactions.Таким образом, любые данные, которые не были изменены, также будут в снимке, что приведет к тому, что они будут в вашей таблице несколько раз.

Я вижу два варианта:

1. Каждый раз стирать таблицувы получите обновленные данные
2. Выполните более детальные обновления

Протирайте таблицу каждый раз, когда вы получаете обновленные данные

Это самое простое, так как для этого требуется меньше всегоизменения в вашем существующем коде.Просто очищайте содержимое таблицы всякий раз, когда вы получаете обновленные данные из базы данных:

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

Это должно работать нормально, но перерисовывает все содержимое таблицы каждый раз, когда что-то там изменяется.Это может привести к заметному мерцанию, когда стол большой.

Выполнять более детальные обновления

Альтернатива - выполнять более детальные обновления.Т.е. изначально вы добавляете все дочерние элементы, после этого вы только добавляете новые дочерние элементы, удаляете любые данные, которые удаляются из базы данных и т. Д.

Firebase имеет специальные события для этой цели, которые запускают на один уровень ниже в базе данных.,Например, событие child_added определяется как «сначала срабатывает для каждого узла по ссылке, а затем каждый раз, когда узел добавляется по ссылке».В том же духе происходят события child_removed, child_changed и child_moved.С помощью этих событий вы можете выполнять более детальные обновления таблицы.

Например, вот как вы будете обрабатывать 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.

Например, вот как удалить строку из таблицы при полученииудалено из базы данных:

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