Question

我目前正在开发一个应用程序，并使用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>

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

将数据从Firebase导出到HTML表

1 个答案: