如何将Firebase中的数据导入HTML页面？ [英] How to pull out data from Firebase into HTML page?

问题描述

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

JavaScript文件:(使用JQuery）

< pre $ databaseRef.orderByKey（）
.once（'child_added'，function（snapshot）{
snapshot.forEach（function（childSnapshot）{

var childKey = childSnapshot.key;
var childData = childSnapshot.val（）;
$ b console.log（Key：+ childKey +; Value：+ childData） ;
$ b $（'＃nameValue'）。text（childData）;
$（'＃emailValue'）.text（childData）;
}）;
}）;


HTML代码：

 < div class =table-responsive> 
< table class =table> 
< thead> 
< tr> 
< th>名称< / th> 
< th>电子邮件< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td id ='nameValue'>< / td> 
< td id ='emailValue'>< / td> 
< / tr> 
 
< / tbody> 
< / table> 
< / div> 
< / div> 
  

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

 用户
 | 
 -KhyubUqLRGUGW-rtija 
 | --- email：[e-mail]
 | ---名称：p1
  

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

 键：email;价值：[e-mail] 
钥匙：名字;值：p1 
  

但我无法在我的HTML页面上显示它们。我的JQuery函数可以做些什么来显示我的HTML页面上的内容。

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

解决方案

首先使用

  $（ '＃nameValue'）附加（childKey）。 
 $（'＃emailValue'）。append（childData）; 
  

而不是

  $（ '＃nameValue'）文本（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>名称< / th> 
< th>电子邮件< / th> 
< / tr> 
< / thead> 
 
< tbody id =data> <！ - 变更 - > 
 
< / tbody> 
< / table> 
< / div> 
< / div> 
  

请注意，我删除了您的行，因为在附加它后会导致HTML表结构不正确。这是你想要的结构 W3school例子
现在它会正确地追加到你的表格列

I'm developing a simple User Registration web application which takes name and email as an input from the user. Used Firebase as an online data store.

JavaScript file: ( Used 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 Code:

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

This is my Database structure on Firebase.

users
  |
   -KhyubUqLRGUGW-rtija
      |--- email: "[e-mail]"
      |--- name: "p1"

I'm able to get these values on Browser Console.

Key: email; Value: [e-mail]
Key: name; Value: p1

But I'm unable to display them on my the HTML page. What can be done to my JQuery function in order to display the contents on my HTML page.

This is the current output that I'm getting when I submit the details.

解决方案

Firstly use

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

instead of

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

as .text() replaces the text every time you call it i.e. it overrides the previous data, what you require is appending the data to previous data.

Secondly you are making a mistake in appending data to table. what you should do is:

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

in you updated HTML code:

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

Notice that I have removed your .. lines because after appending it would result in incorrect HTML table structure. This is the structure you want W3school example Now it will append properly to your table columns

这篇关于如何将Firebase中的数据导入HTML页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！