【问题标题】:Can't append firebase list data to html table because of push id由于推送 ID,无法将 Firebase 列表数据附加到 html 表
【发布时间】:2019-08-24 18:26:30
【问题描述】:

我尝试将 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 数据库快照

我的问题可能是什么?

【问题讨论】:

    标签: javascript html web firebase-realtime-database html-table


    【解决方案1】:

    首先你可以拥有:

    var staff = snap.val();
    

    然后使用以下命令访问道具: staff.issue_to、staff.issue_status 其次,你要选择

    $('#table_body tbody')
    

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

    让我知道它是否有效。

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

    【讨论】:

    • 我认为这与我引用它们的方式有关。推送 ID 是一个因素。我试过你的,它没有用
    • var rootRef = firebase.database().ref("HotelComplaints/HotelComplaintsid");
    • 只有在我完全删除了 Hotel Complaints 节点后才能让它工作......
    • 运气好了吗? @heraphim
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-03-13
    • 1970-01-01
    • 2016-08-14
    • 2023-03-30
    • 1970-01-01
    • 2020-03-25
    • 2021-12-01
    相关资源
    最近更新 更多