【问题标题】:Firebase DB to HTML tableFirebase DB 到 HTML 表
【发布时间】:2020-01-07 22:44:55
【问题描述】:

我是 firebase 新手,对它不太熟悉。我正在尝试以 HTML 表的形式将我的 firebase 数据库放到前端。 我通过谷歌搜索得到了一些帮助,但现在我卡住了。 我无法将数据填充到我的 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>

我附上了我的数据库结构

【问题讨论】:

    标签: javascript html firebase firebase-realtime-database


    【解决方案1】:

    显然您在数据库的根目录中创建了一个额外的testproject-e2435 节点。

    因此你应该这样做

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

    附注:您可以将此变量称为customerReference

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-08
    • 1970-01-01
    • 1970-01-01
    • 2018-06-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多