Display data from firebase to HTML table

Question

I would like to ask some help, I'm a front-end developer and we currently have a project/task that is all about the back end. My team members decided to used firebase as a database in our web application. I can now send data to the database but I have a problem, I cant retrieve the data from firebase to the web application. I am planning to retrieve data and display it in my table (HTML).

This is my code in my javascript for retrieving data from firebase:

var database = firebase.database().ref().child('Tasks');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var TaskTitle = snapshot.val().TaskTitle;
        var JobId= snapshot.val().JobId;

        snapshot.forEach(function(data){
        });

        content = '<tr>';
        content += '<td>' + TaskTitle + '</td>'; //column1
        content += '<td>' + JobId + '</td>';//column2
        content += '</tr>';
    }

    $('#ex-table').append(content);
    console.log(snapshot.val());
});

And this is my code in my HTML table to display the data from the database:

<table class="table table-striped" id="ex-table">
    <thead class="thead-inverse">
        <tr>
        <th>Task Title</th>
        <th>Category</th>
        <th>Date</th>
        <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr id="tr">
        <td id="titleTask"></td>
        <td id="categoryTask"></td>
        <td id="dateTask"></td>
        <td id="statusTask"></td>
       </tr>
   </tbody>

I cant actually see the data that I have retrieved using the console in my web browser in chrome.

and it's displaying this: Data displayed in console while in my web app it's displaying like this: undefined

Can someone please help me, I'm new to everything your help is so much appreciated.

Answer 1

Your nesting is a bit wonky, and unfortunately it matters quite a lot where you put all the bits:

var database = firebase.database().ref().child('Tasks');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';

        snapshot.forEach(function(data){
            var TaskTitle = data.val().TaskTitle;
            var JobId= data.val().JobId;
            content += '<tr>';
            content += '<td>' + TaskTitle + '</td>'; //column1
            content += '<td>' + JobId + '</td>';//column2
            content += '</tr>';
        });

        $('#ex-table').append(content);
    }
});

In steps:

1. This loads the tasks from Firebase, with database.once() .
2. Then if there are any tasks (one level indented), it loops over them (with snapshot.forEach(...) ).
3. In that callback (so one more level indented) it takes the title and job id for that specific task, and adds it to the HTML string it is building.
4. The finally it adds the HTML to the table.

Answer 2

    <table border="1" style="width:100%" id="ex-table">
        <tr id="tr">
            <th>Student ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Username</th>
            <th>Password</th>
    </table>

const starCountRef = ref(database, 'user_register/'); onValue(starCountRef, (snapshot) => {

   snapshot.forEach(function (data) {
       var val = data.val();

       var content = '';


       content += '<tr>';
       content += '<td>' + val.student_id + '</td>'; //column1
       content += '<td>' + val.first_name + '</td>';//column2
       content += '<td>' + val.last_name + '</td>';//column2
       content += '<td>' + val.email + '</td>'; //column1
       content += '<td>' + val.address + '</td>';//column2
       content += '<td>' + val.username + '</td>';//column2
       content += '<td>' + val.password + '</td>';//column2
       content += '</tr>';

       $('#ex-table').append(content);


   });

   });