将数据从 Firebase 导出到 HTML 表中答案

【问题标题】：export data from Firebase into HTML Table将数据从 Firebase 导出到 HTML 表中
【发布时间】：2018-12-21 00:24:45
【问题描述】：

我目前正在开发一个应用程序并使用 firebase 作为我的数据库，我试图将数据从 firebase 导出到表中，因为在表视图中显示应用程序中的数据比我想象的要难，所以我转向 HTML 表和写了一个代码，但它没有显示我想要的数据。只是要注意，我对这一切都很陌生，所以任何帮助都将不胜感激。以下是我的代码：

<html>
<body>
<style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
}

table {
    border-spacing: 5px;
}

</style>

<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBuJiZZNabXuBO0ac",
    authDomain: "",
    databaseURL: "",
    projectId: "testproject-5",
    storageBucket: "",
    messagingSenderId: "2568"
  };
  firebase.initializeApp(config);
</script>

<head>
    <title>Quicksol Attendance</title>
    </head>
<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Employee ID</th>
    <th>Email</th> 
    <th>Date </th>
    <th>Check in Time</th>
    <th>Check out Time</th>
 </table> 

<script>
    var database = firebase.database();
    database.ref().once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.employeeID + '</td>';
                content += '<td>' + val.email + '</td>';
                content += '<td>' + val.date + '</td>';
                content += '<td>' + val.checkintime + '</td>';
                content += '<td>' + val.checkouttime + '</td>';
                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>

</body>
</html>

【问题讨论】：

你能分享一下你的json结构吗？
@VindhyachalKumar 添加了
employeeId 在 JSON 上不存在
@VindhyachalKumar 它在签到和结帐的下方
检查这个小提琴jsfiddle.net/vks9009/xpvt214o/404889获取所有字段

标签： html database firebase firebase-realtime-database

【解决方案1】：

我已经改变了'database.ref("/").once('value', function (snapshot) {'里面的脚本

检查工作代码jsfiddle

    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyBuJiZZNabXuBU-SoRhZFbdecxs0L2O0ac",
        authDomain: "testproject-51bd9.firebaseapp.com",
        databaseURL: "https://testproject-51bd9.firebaseio.com",
        projectId: "testproject-51bd9",
        storageBucket: "testproject-51bd9.appspot.com",
        messagingSenderId: "256942259748"
    };
    firebase.initializeApp(config);


    var database = firebase.database();
    database.ref("/").once('value', function (snapshot) {
        if (snapshot.exists()) {
            var content = '';
            snapshot.forEach(function (data) {
                var val = data.val();
                var tableData = [];
                var sysDate, checkinTime, checkoutTime, email, employeeId;
                
                for (var checkin in val.Checkin) {
                    for (var date in val.Checkin[checkin]) {
                        tableData.push({ 'employeeId': checkin, 'email': val.Checkin[checkin][date]['Email'], 'date': date, 'checkinTime': val.Checkin[checkin][date]['Check in Time'] });
                    }
                }

                for (var checkout in val.Checkout) {
                    for (var checkoutDate in val.Checkout[checkout]) {
                        var item = tableData.find(function (i) { return i.employeeId == checkout && i.date == checkoutDate; })
                        if (item)
                            item.checkoutTime = val.Checkout[checkout][checkoutDate]['Checkout Time'];
                    }
                }
                console.log(tableData);
                tableData.forEach(function (item) {
                    content += '<tr>';
                    content += '<td>' + item.employeeId + '</td>';
                    content += '<td>' + item.email + '</td>';
                    content += '<td>' + item.date + '</td>';
                    content += '<td>' + item.checkinTime + '</td>';
                    content += '<td>' + (item.checkoutTime ? item.checkoutTime : 'NA') + '</td>';
                    content += '</tr>';
                });
            });
            $('#ex-table').append(content);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-database.js"></script>
<table style="width:100%" id="ex-table">
    <tr id="tr">
        <th>Employee ID</th>
        <th>Email</th>
        <th>Date </th>
        <th>Check in Time</th>
        <th>Check out Time</th>
</table>

【讨论】：

如何将其保存为 HTML 文件？
编辑：每当我签入时，它只会保存一个数据并替换其他数据
使用 'var blob = new Blob([$("html").html()], {type: "text/html;charset=utf-8"}); saveAs(blob, "page.html");'将其保存为 html 文件
我只是右键单击并保存为网页。它只保存一个数据，而不是数据库上的所有数据
我已经尝试右键单击并保存在谷歌浏览器上，获取页面上显示的所有行