How to delete the previous data

Question

How can I display the present data instead of getting multiple data.

I want to remove the previous data because whenever new data is stored on Firebase it copies the same data about 4 times.

I'm using a mobile app to send data to Firebase. I've changed databaseref.once to databaseref.on so it can be a real-time database however multiple data is stored on my table.

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

Frank van Puffelen · Accepted Answer · 2018-10-17 16:25:40Z

The simplest way is to add a tbody element to your table:

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

And then clear that before adding the data to it:

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

Note that while simple, this is not very efficient, so you may see some flicker. If that is a problem, consider listening for child_ events in Firebase, which give you information to more precisely update the table, instead of the brute force refresh above.

Hello sir Frank Good day! thanks for answering my question. Im new to firebase and javascript language but your answer solved my questions immediately thanks again God bless ^^
Btw sir I've gotten the url for my image. is there any way where I can display it on the table?

Collectives™ on Stack Overflow

How to delete the previous data

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related