How to pull out data from Firebase into HTML page?

Question

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

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

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

      console.log("Key: " + childKey + "; Value: " + childData);

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

HTML Code:

<div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id='nameValue'></td>
                    <td id='emailValue'></td>
                </tr>

            </tbody>
        </table>
    </div>
    </div>

This is my Database structure on Firebase.

users
  |
   -KhyubUqLRGUGW-rtija
      |--- email: "p1@gmail.com"
      |--- name: "p1"

I'm able to get these values on Browser Console.

Key: email; Value: p1@gmail.com
Key: name; Value: p1

But I'm unable to display them on my the HTML page. What can be done to my JQuery function in order to display the contents on my HTML page.

This is the current output that I'm getting when I submit the details.

warl0ck · Accepted Answer · 2017-04-18T17:07:07.373

2

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:

<div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>

                <tbody id="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

edited Apr 18 '17 at 17:07

answered Apr 18 '17 at 06:03

warl0ck

3,356
4
27
57

This was pretty close! But then, the ouput is `p1@gmail.com p1` as my first table data. How can we refine this ? – coderpc Apr 18 '17 at 06:08
refine as in? what you want to achieve here? – warl0ck Apr 18 '17 at 06:35
I have two columns. `name` and `email`. But the result is getting appended in the `name` column only. So, now how can I get them separated. Each value in different columns. – coderpc Apr 18 '17 at 14:07
that might be because its is appending name and email in wrong manner to the table. please look at my updated answer – warl0ck Apr 18 '17 at 16:18
Much appreciate it. A bit solved now. One more thing is that, for every submission It is appending side by side but not as rows. Can you please tell me how to do that ? – coderpc Apr 18 '17 at 17:00
1

oops that's my bad you need to append data in the `tbody` tag instead of `tr` tag check the new answer – warl0ck Apr 18 '17 at 17:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141998/discussion-between-pc-and-warl0ck). – coderpc Apr 18 '17 at 17:13

score 1 · Answer 2 · answered Apr 18 '17 at 17:07

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:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr id="keysRow"></tr>
    </thead>
    <tbody>
      <tr id="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>');

    });
  });

this is what exactly I wanted. But then, the values are getting added side by side when i make a new submission. — coderpc, Apr 18 '17 at 17:13

How to pull out data from Firebase into HTML page?

2 Answers2

Linked