显示从 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 浏览器中查看使用控制台检索到的数据。

它显示如下：Data displayed in console 而在我的网络应用程序中显示如下：undefined

有人可以帮助我吗，我对你的帮助非常感激。

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