如何将 Firebase 中的数据提取到 HTML 页面中？

Question

我正在开发一个简单的用户注册 Web 应用程序，它将 name 和 email 作为用户的输入。将 Firebase 用作在线数据存储。

JavaScript 文件：（使用的 JQuery）

databaseRef.orderByKey()
  .once('child_added', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {

      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();

      console.log("Key: " + childKey + "; Value: " + childData);

      $('#nameValue').text(childData);
      $('#emailValue').text(childData);
    });
  });

HTML 代码：

<div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id='nameValue'></td>
                    <td id='emailValue'></td>
                </tr>

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

这是我在 Firebase 上的数据库结构。

users
  |
   -KhyubUqLRGUGW-rtija
      |--- email: "p1@gmail.com"
      |--- name: "p1"

我可以在浏览器控制台上获取这些值。

Key: email; Value: p1@gmail.com
Key: name; Value: p1

但我无法在我的 HTML 页面上显示它们。为了在我的 HTML 页面上显示内容，可以对我的 JQuery 函数执行哪些操作。

这是我提交详细信息时得到的当前输出。

Answer 1

首先使用

$('#nameValue').append(childKey);
$('#emailValue').append(childData);

而不是

$('#nameValue').text(childKey);
$('#emailValue').text(childData);

.text() 每次调用它时都会替换文本，即它会覆盖以前的数据，您需要将数据附加到以前的数据中。

其次，您在将数据附加到表时犯了一个错误。你应该做的是：

$("#data").append('<tr><td>' + childKey + '</td><td>'+ childData+'</td></tr>');

在您更新的 HTML 代码中：

<div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>

                <tbody id="data"> <!-- changed -->

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

请注意，我已删除您的 .. 行，因为添加后会导致 HTML 表格结构不正确。这是你想要的结构W3school example 现在它将正确附加到您的表格列

Answer 2

您可以指定数据库中的keys，而不是在表的<th> 中硬编码固定值。您甚至可以对表的数据执行相同的操作。即，values 到相应的keys。

将您的 HTML 代码修改为：

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr id="keysRow"></tr>
    </thead>
    <tbody>
      <tr id="valuesRow"></tr>
    </tbody>
  </table>
</div>

这是您从 Firebase 获取数据的方式。

databaseRef
  .once('child_added', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {

      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();

      console.log(childKey + " - " + childData); // Displays key with its value in your Browser Console

      $('#keysRow').append('<th>' + childKey + '</th>');
      $('#valuesRow').append('<td>' + childData + '</td>');

    });
  });