CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
Vai
Vai

Reputation: 353

Firebase DB to HTML table

I am new to firebase and am not too familiar with it. I am trying to get my firebase DB to the front end in the form of HTML table. I got a bit of help by googling stuff but now I have stuck. I am not able to populate the data into my HTML table.

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",
      };
      firebase.initializeApp(config);
      var database = firebase.database().ref().child('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);
    }
    });
    </script>
  </body>
</html>

I have my DB structure attached

enter image description here

Upvotes: 0

Views: 72

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83048

Apparently you have created an extra testproject-e2435 node at the root of your database.

You should therefore do

var database = firebase.database().ref().child('testproject-e2435/Customer');

Side note: you may call this variable as customerReference.

Upvotes: 1

Related Questions