我在html表中检索Firebase用户值时重复的值

问题描述

检索Firebase数据库值时，这些值是重复的，我不知道为什么控制台仅显示我在数据库take a look at this.中具有的4个值

var ref = firebase.database().ref("users");
     ref.on("value",function(data){
      $('#table').empty()
        var content = '';
         data.forEach(function(childSnapshot){
             if (childSnapshot.exists()){
                var id = childSnapshot.key;
             var childData = childSnapshot.val();
             console.log(childData);
             console.log(id);

             content +='<tr>';
                content += '<td>' + childData.username + '</td>';
                content += '<td>' + childData.phone + '</td>';
                content += '</tr>';
         };
         $('#table').append(content);
        });

     });

解决方法

这是Firebase侦听器的预期行为。如果您只想获取数据并完成处理，则可以使用以下方法：

var ref = firebase.database().ref("users");
ref.once('value').then(function(snapshot) {// Do your stuff here}))

查看以下问题： Firebase ref.on("value" is getting called even without a change in value - node.js

[EDIT]实际上是由于$('#table').append(content)行。将其放入forEach循环中，一切都会好起来

,

    function SelectAllData() {
    firebase.database().ref('reminders').on('value',function (AllRecords) {
            AllRecords.forEach(
                function (currentRecord) {
                    var task = currentRecord.val().task;
                    var  description = currentRecord.val().description;
                    var date = currentRecord.val().date;
                    AddItemsToTable(task,date,description);
                }
            );
        });
}
window.onload = SelectAllData;

//-----------------filling up the table----------------------------------//

function AddItemsToTable(task,description) {
    var tbody = document.getElementById('tbody1');
    var trow = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    td1.innerHTML = task;
    td2.innerHTML = date;
    td3.innerHTML = description;
    trow.appendChild(td1);
    trow.appendChild(td2);
    trow.appendChild(td3);
    tbody.appendChild(trow);
} 

这是我使用的，我没有使用jQuery。我遇到了同样的问题，它只是再次打印整个表格。我将如何修复它。

谢谢