Question

我目前在从Firebase实时数据库中检索数据时遇到问题，希望将其显示在HTML表中。我想寻求帮助，我目前有一个与后端有关的项目/任务。我决定将Firebase用作Web应用程序中的数据库。我现在可以将数据发送到数据库，但是我有一个问题，我无法将数据从Firebase检索到Web应用程序。我正计划检索数据并将其显示在表格（HTML）中。

  $(document).ready(function () {



        var config = {

            authDomain: "digital-student-diary.firebaseapp.com",
            databaseURL: "https://digital-student-diary.firebaseio.com",
            projectId: "digital-student-diary",
            storageBucket: "",
            messagingSenderId: "573866105673"
        };
        firebase.initializeApp(config);

        const database = firebase.database();
        const databaseReference = database.ref().child('school/teacher');

        databaseReference.on('child_added', snap => {
            JSON.stringify(snap.val());


            var name = snap.child('teacherName').val();
            var email = snap.child('teacherEmail').val();
            var dob = snap.child('teacherDateofBirth').val();
            var phone = snap.child('teacherPhone').val();
            var cnic = snap.child('teacherCnic').val();
            var city = snap.child('teacherCity').val();
            var street = snap.child('teacherStreetAddress').val();
            var gender = snap.child('teacherGender').val();



            var tableRef = document.getElementById('tableBody');

            tableRef.append('<tr><td>' + name + '</td><td>' + email + '</td><td>' + dob + '</td><td>' + phone + '</td><td>' + cnic +
                '</td><td>' + city + '</td><td>' + street + '</td><td>' + gender + '</td></tr>');
        });




    });

view-teacher.html

这是我的视图教师文件，具有基本的HTML表，并且表主体具有ID“ tableBody”，用于引用表。

<div class="content mt-3">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <strong class="card-title">List of Teachers</strong>
                    </div>
                    <div></div class="card-body">
                    <table class="table">
                        <thead class="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>email</th>
                                <th>DOB</th>
                                <th>Phone</th>
                                <th>CNIC</th>
                                <th>City</th>
                                <th>Street</th>
                                <th>Gender</th>

                            </tr>
                        </thead>

                        <tbody id="tableBody">

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div><!-- .animated -->
</div><!-- .content -->

这是我的代码的输出

Answer 1

您不需要

<script>

表格正文中的

标签。网络工具中的页面结构更有助于诊断问题的屏幕快照。结构似乎是正确的。

我想将Firebase数据库中的数据显示到HTML表中

1 个答案: