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页面上显示它们。我可以对我的JQuery函数做什么来显示我的HTML页面上的内容。

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

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

您可以指定数据库中的<th>，而不是在表keys中对固定值进行硬编码。您甚至可以对表的数据执行相同的操作。即values与keys相应的<div class="table-responsive"> <table class="table"> <thead> <tr id="keysRow"></tr> </thead> <tbody> <tr id="valuesRow"></tr> </tbody> </table> </div>。

将您的HTML代码修改为：

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>');

    });
  });

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

imputeTS

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

2 个答案: