在不重复旧值的情况下将 Firebase DB 值获取到 HTML 表答案

【问题标题】：Getting Firebase DB values to HTML tables without repetition of older values在不重复旧值的情况下将 Firebase DB 值获取到 HTML 表
【发布时间】：2020-01-08 09:28:44
【问题描述】：

我正在尝试将我的 Firebase DB 值显示到 HTML 表中。当我添加这些值时，我的前端表应该会自动更新，而无需刷新。我能够做到这一点，但它也以某种方式在表格顶部附加了最新的值。不知道怎么回事

这是我嵌入的 HTML 和 JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Customer table</title>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

  <body>
    <table class="table table-striped" id="ex-table">
      <tr id="tr">
        <th>Email</th>
        <th>Name</th>
        <th>Phone</th>
      </tr>
    </table>

    <script>
      var config = {
        apiKey: "AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0",
        authDomain: "testproject-e2435.firebaseapp.com",
        databaseURL: "https://testproject-e2435.firebaseio.com",
        projectId: "testproject-e2435",
        storageBucket: "testproject-e2435.appspot.com",
        messagingSenderId: "276265166035",
        appId: "1:276265166035:web:8be86e78d3e3cdaeca2026",
        measurementId: "G-8ZFYCDXPR2"
      };
      firebase.initializeApp(config);
      var database = firebase.database().ref().child('testproject-e2435/Customer');
      database.once('value', function(snapshot){
          if(snapshot.exists()){
              var content = '';
              snapshot.forEach(function(data){
                  var Email = data.val().Email;
                  var Name = data.val().Name;
                  var Phone = data.val().Phone;
                  content += '<tr>';
                  content += '<td>' + Email + '</td>'; //column1
                  content += '<td>' + Name + '</td>';//column2
                  content += '<td>' + Phone + '</td>';//column2
                  content += '</tr>';
              });
              $('#ex-table').append(content);
          }
      });

      database.limitToLast(1).on('value', function(snapshot){
          if(snapshot.exists()){
              var content = '';
              snapshot.forEach(function(data){
                  var Email = data.val().Email;
                  var Name = data.val().Name;
                  var Phone = data.val().Phone;
                  content += '<tr>';
                  content += '<td>' + Email + '</td>'; //column1
                  content += '<td>' + Name + '</td>';//column2
                  content += '<td>' + Phone + '</td>';//column2
                  content += '</tr>';
              });
              $('#ex-table').append(content);
          }
      });
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

如果我正确理解您的要求（“当我添加值时，我的前端表应该会自动更新而无需刷新”）您应该只使用on() 方法和child_added 声明一个侦听器事件。

您不需要结合对once() 方法的调用PLUS 一个侦听器（与on('value', ...) 方法），因为如文档中所述：

child_added 事件

此事件将在此为每个初始子项触发一次 位置，并且每次有新孩子时都会再次触发 添加了。

以下应该有效：

    database.on('child_added', function (snapshot) {
        var content = '';
        var Email = snapshot.val().Email;
        var Name = snapshot.val().Name;
        var Phone = snapshot.val().Phone;
        content += '<tr>';
        content += '<td>' + Email + '</td>'; //column1
        content += '<td>' + Name + '</td>';//column2
        content += '<td>' + Phone + '</td>';//column2
        content += '</tr>';

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

    });

【讨论】：