时间戳

首页 > 解决方案 > 由于推送 ID，无法将 Firebase 列表数据附加到 html 表

javascript - 由于推送 ID，无法将 Firebase 列表数据附加到 html 表

问题描述

我尝试将 firebase 数据附加到 html 表中，但它似乎不起作用。推送 ID 可能是一个原因。任何了解如何解决此问题的人？下面是我的代码。

HTML

<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Staff Name</th>
<th class="cell100 column2">Department</th>
<th class="cell100 column3">Issue</th>
<th class="cell100 column4">Issued To</th>
<th class="cell100 column5">Time Reported</th>
<th class="cell100 column6">Issue Status</th>
<th class="cell100 column7">Time Solved</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll">
<table id="table_body">
<tbody>

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

JS

(function() {

// Initialize Firebase
var config = {
apiKey: "AIzaSyDPpRA*********WOAtSlplK8g7c",
authDomain: "hotel-report-ticketing-system.firebaseapp.com",
databaseURL: "https://hotel-report-ticketing-system.firebaseio.com",
projectId: "hotel-report-ticketing-system",
storageBucket: "hotel-report-ticketing-system.appspot.com",
messagingSenderId: "731***033376"
};
firebase.initializeApp(config);

var rootRef = firebase.database().ref().child("Hotel 
Complaints").child("Hotel Complaintsid");

rootRef.on("child_added", snap => {

var staff_n = snap.child("staff_name").val();
    var staff_d = snap.child("staff_department").val();
    var issue = snap.child("issue_description").val();
    var issue_t = snap.child("issue_to").val();
    var issue_tym = snap.child("issue_time").val();
    var issue_s = snap.child("issue_status").val();
    var issue_t_s = snap.child("time_solved").val();

    $("#table_body").append("<tr><td>" + staff_n + "</td><td>" + staff_d + "</td><td>" + issue + "</td><td>" + issue_t + "</td><td>" + issue_tym + "</td><td>" +
    issue_s + "</td><td>" + issue_t_s + "</td></tr>");
});

});

Firebase 数据库快照

在此处输入图像描述

我的问题可能是什么？

标签： javascripthtmlwebfirebase-realtime-databasehtml-table

解决方案

首先你可以拥有：

var staff = snap.val();

然后通过以下方式访问道具：staff.issue_to、staff.issue_status 其次，您要选择

$('#table_body tbody')

使用 jquery，以便您可以附加到正确的元素。

让我知道它是否有效。

编辑：此外，每当某些东西不起作用时，控制台记录您的变量，查看 jQuery 选择器是否正确，查看所有这些值是否存在，并查看检查器以查看是否将项目添加到您的 html，但它们可能是空的因为变量是空的。

推荐阅读