Как удалить предыдущие данные - PullRequest
0 голосов
/ 17 октября 2018

Как я могу отобразить текущие данные вместо получения нескольких данных.

Я хочу удалить предыдущие данные, потому что всякий раз, когда новые данные хранятся в Firebase, они копируют одни и те же данные примерно 4 раза.

Я использую мобильное приложение для отправки данных в Firebase.Я изменил databaseref.once на databaseref.on, так что это может быть база данных в реальном времени, однако в моей таблице хранится несколько данных.

<html>
<head>
 <title>Firebase Realtime Database Web</title>
 <script>
 // firebase config here
 </script>
</head>
<body>
 <h3>Police Station 1</h3>
 <table id="reports" border="1">
  <tr>
   <th>Email Address</th>
   <th>Caption</th>
   <th>Location</th>
   <th>Time</th> 
   <th>Picture</th>
  </tr>
 </table>

 <script>
  var tblUsers = document.getElementById('reports');
  var databaseRef = firebase.database().ref('PP3/');
  var rowIndex = 1;

  databaseRef.on('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
   var childKey = childSnapshot.key;
   var childData = childSnapshot.val();

   var row = tblUsers.insertRow(rowIndex);
   var email = row.insertCell(0);
   var caption = row.insertCell(1);
   var location = row.insertCell(2);
   var time = row.insertCell(3);
   var picture = row.insertCell(4);
   email.appendChild(document.createTextNode(childData.Email.replace(/\\/g, '').replace(/"/g, '')));
   caption.appendChild(document.createTextNode(childData.Caption.replace(/\\/g, '').replace(/"/g, '')));
   location.appendChild(document.createTextNode(childData.Location.replace(/\\/g, '').replace(/"/g, '')));
   time.appendChild(document.createTextNode(childData.Time.replace(/\\/g, '').replace(/"/g, '')));
   picture.appendChild(document.createTextNode(childData.Picture.replace(/\\/g, '').replace(/"/g, '')));
   rowIndex = rowIndex + 1;
});
  });


</script>
</body>
</html>

1 Ответ

0 голосов
/ 17 октября 2018

Самый простой способ - добавить элемент tbody в таблицу:

 <table id="reports" border="1">
  <tr>
   <th>Email Address</th>
   <th>Caption</th>
   <th>Location</th>
   <th>Time</th> 
   <th>Picture</th>
  </tr>
  <tbody id="reportbody"></tbody>
 </table>

, а затем очистить, прежде чем добавлять в него данные:

<script>
  var tblUsers = document.getElementById('reportbody');
  var databaseRef = firebase.database().ref('PP3/');
  var rowIndex = 1;

  databaseRef.on('value', function(snapshot) {
    tblUsers.innerHTML = '';
    snapshot.forEach(function(childSnapshot) {
     var childKey = childSnapshot.key;
     var childData = childSnapshot.val();

     var row = tblUsers.insertRow(rowIndex);
     ...

Обратите внимание, что покапросто, это не очень эффективно, поэтому вы можете увидеть некоторые мерцания.Если это является проблемой, рассмотрите возможность прослушивания событий child_ в Firebase, которые дают вам информацию для более точного обновления таблицы, вместо того, чтобы использовать грубое обновление выше.

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