How To Pull Out Data From Firebase Into Html Page?

I'm developing a simple User Registration web application which takes name and email as an input from the user. Used Firebase as an online data store. JavaScript file: ( Used JQuer

Solution 1:

Firstly use

$('#nameValue').append(childKey);
$('#emailValue').append(childData);

instead of

$('#nameValue').text(childKey);
$('#emailValue').text(childData);

as .text() replaces the text every time you call it i.e. it overrides the previous data, what you require is appending the data to previous data.

Secondly you are making a mistake in appending data to table. what you should do is:

$("#data").append('<tr><td>' + childKey + '</td><td>'+ childData+'</td></tr>');

in you updated HTML code:

<divclass="table-responsive"><tableclass="table"><thead><tr><th>Name</th><th>Email</th></tr></thead><tbodyid="data"><!-- changed --></tbody></table></div></div>

Notice that I have removed your .. lines because after appending it would result in incorrect HTML table structure. This is the structure you want W3school example Now it will append properly to your table columns

Solution 2:

Instead of hardcoding fixed values in your your table's <th>, you could specify the keys that are in your database. You could even do the same with the table's data. i.e., values to those respective keys.

Modify your HTML code to this:

<divclass="table-responsive"><tableclass="table"><thead><trid="keysRow"></tr></thead><tbody><trid="valuesRow"></tr></tbody></table></div>

This is how you get the data from your Firebase.

databaseRef
  .once('child_added', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {

      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();

      console.log(childKey + " - " + childData); // Displays key with its value in your Browser Console

      $('#keysRow').append('<th>' + childKey + '</th>');
      $('#valuesRow').append('<td>' + childData + '</td>');

    });
  });