將數據從 firebase 顯示到 HTML 表格

Question

我想尋求一些幫助，我是一名前端開發人員，我們目前有一個關於后端的項目/任務。 我的團隊成員決定在我們的 Web 應用程序中使用 firebase 作為數據庫。 我現在可以將數據發送到數據庫，但是我遇到了一個問題，我無法將數據從 firebase 檢索到 Web 應用程序。 我計划檢索數據並將其顯示在我的表格 (HTML) 中。

這是我在 javascript 中用於從 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());
});

這是我在 HTML 表中的代碼，用於顯示數據庫中的數據：

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

我實際上無法在 Chrome 瀏覽器中查看使用控制台檢索到的數據。

它顯示的是：數據顯示在控制台中，而在我的網絡應用程序中，它顯示如下：未定義

有人可以幫助我嗎，我對一切都很陌生，非常感謝您的幫助。

Answer 1

你的嵌套有點不穩定，不幸的是，你把所有的東西放在一起很重要：

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

步驟：

1. 這將使用database.once()從Firebase加載任務。
2. 然后，如果有任何任務（一個級別縮進），它將循環遍歷它們（使用snapshot.forEach(...) ）。
3. 在該回調中（縮進一個級別），它獲取該特定任務的標題和作業ID，並將其添加到它正在構建的HTML字符串中。
4. 最后它將HTML添加到表中。

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


   });

   });