CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
Vai
Vai

Reputation: 353

Getting Firebase DB values to HTML tables without repetition of older values

I am trying to display my Firebase DB values to a HTML table. When I add the values, my front end table should automatically be updated without the need for a refresh. I am able to do that but it somehow also appends the most recent value at the top of the table. Don't know whats wrong

Here is my HTML and JS embedded within:

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

Upvotes: 0

Views: 53

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83068

If I correctly understand your requirement ("When I add the values, my front end table should automatically be updated without the need for a refresh") you should only declare a listener with the on() method and the child_added event.

You don't need to combine a call to the once() method PLUS a listener (with the on('value', ...) method) because, as explained in the documentation:

child_added event

This event will be triggered once for each initial child at this location, and it will be triggered again every time a new child is added.

The following should work:

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

    });

Upvotes: 2

Related Questions