Получение значений БД Firebase в HTML таблицах без повторения старых значений - PullRequest
Новая
       2

Получение значений БД Firebase в HTML таблицах без повторения старых значений

0 голосов
/ 08 января 2020

Я пытаюсь отобразить мои значения базы данных Firebase в таблице HTML. Когда я добавляю значения, моя таблица переднего плана должна автоматически обновляться без необходимости refre sh. Я могу сделать это, но он также добавляет последнее значение в верхней части таблицы. Не знаю, что не так

Вот мои 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>

1 Ответ

2 голосов
/ 08 января 2020

Если я правильно понимаю ваше требование («Когда я добавляю значения, моя таблица переднего плана должна автоматически обновляться без необходимости refre sh»), вы должны объявить слушателя только с 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);

    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...