Javascript Firebase数据库到HTML表_Javascript_Html_Firebase_Firebase Realtime Database

Javascript Firebase数据库到HTML表

javascript html firebase

Javascript Firebase数据库到HTML表,javascript,html,firebase,firebase-realtime-database,Javascript,Html,Firebase,Firebase Realtime Database,我是firebase的新手，对它不太熟悉。我正试图以HTML表格的形式将firebase DB放到前端。我通过谷歌搜索得到了一些帮助，但现在我被卡住了。我无法将数据填充到HTML表中以下是我嵌入其中的HTML和JS： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Customer table</title> <s

我是firebase的新手，对它不太熟悉。我正试图以HTML表格的形式将firebase DB放到前端。我通过谷歌搜索得到了一些帮助，但现在我被卡住了。我无法将数据填充到HTML表中

以下是我嵌入其中的HTML和JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Customer table</title>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

  <body>
    <table class="table table-striped" id="ex-table">
      <tr id="tr">
        <th>Email</th>
        <th>Name</th>
        <th>Phone</th>
      </tr>
    </table>

    <script>
      var config = {
        apiKey: "AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0",
        authDomain: "testproject-e2435.firebaseapp.com",
        databaseURL: "https://testproject-e2435.firebaseio.com",
        projectId: "testproject-e2435",
        storageBucket: "testproject-e2435.appspot.com",
        messagingSenderId: "276265166035",
      };
      firebase.initializeApp(config);
      var database = firebase.database().ref().child('Customer');
      database.once('value', function(snapshot){
          if(snapshot.exists()){
              var content = '';

              snapshot.forEach(function(data){
                  var Email = data.val().Email;
                  var Name = data.val().Name;
                  var Phone = data.val().Phone;
                  content += '<tr>';
                  content += '<td>' + Email + '</td>'; //column1
                  content += '<td>' + Name + '</td>';//column2
                  content += '<td>' + Phone + '</td>';//column2
                  content += '</tr>';
      });

        $('#ex-table').append(content);
    }
    });
    </script>
  </body>
</html>


客户表
电子邮件
名称
电话
变量配置={
apiKey:“AIzaSyAV97WnhtDpk-2KKefww6tmuAJeTYA_ql0”，
authDomain:“testproject-e2435.firebaseapp.com”，
数据库URL:“https://testproject-e2435.firebaseio.com",
projectId:“testproject-e2435”，
storageBucket:“testproject-e2435.appspot.com”，
messagingSenderId：“276265166035”，
};
firebase.initializeApp（配置）；
var database=firebase.database（）.ref（）.child（'Customer'）；
数据库.once（'value'，函数（快照）{
if（snapshot.exists（））{
var内容=“”；
snapshot.forEach（函数（数据）{
var Email=data.val（）.Email；
var Name=data.val（）.Name；
var Phone=data.val（）.Phone；
内容+=''；
内容+=''+电子邮件+''；//第1列
content+=''+Name+''；//column2
内容+=''+电话+''；//第2列
内容+=''；
});
$（'#ex table'）。追加（内容）；
}
});

我有我的数据库结构附加

显然，您已经在数据库的根目录下创建了一个额外的

testproject-e2435

节点

因此，你应该这样做

var database = firebase.database().ref().child('testproject-e2435/Customer');

旁注：您可以将此变量称为

customerReference

谢谢您的帮助。此外，我希望我的页面在我用新条目点击数据库时立即显示新条目，而无需刷新页面。这可能吗？如果是，那么怎么做？是的，这是可能的：您应该使用

on（）

方法，而不是

once（）

。请参阅，是的，它正在工作，但早期条目似乎附加到原始条目，因此现在我有了重复的旧条目和新值。根据您的确切要求，您需要使用特定事件，例如，您可以帮助我：