如何從firebase檢索信息並使用javascript將其顯示在HTML表格中

Question

有人可以幫助我，這是我的firebase數據庫，我想從數據庫中檢索用戶列表（此時只顯示信息）並使用javascript將其顯示在普通的html表中

https://www.up-00.com/i/00124/7bfnz8c0mt5d.png

我想顯示用戶表（名字，姓氏......）

更新：這是我嘗試的代碼，沒有成功：

<!DOCTYPE html>
<html>
<head>
    <title>Testing a table</title>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBgXArM80ikVWaTWincfffsYa85I31uf0",
    authDomain: "sosservice-1b5a7.firebaseapp.com",
    databaseURL: "https://sosservice.firebaseio.com",
    projectId: "sosservice-1b5a7",
    storageBucket: "sosservice-1445e.appspot.com",
    messagingSenderId: "1093429197188"
  };
  firebase.initializeApp(config);
</script>
</head>
<body>


<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>First Name</th>
    <th>Last Name</th> 
    <th>CIN</th>
    <th>Tel</th>
    <th>Pass</th>

 </table> 

<script>
    var database = firebase.database();
    database.ref(users).once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.firstName + '</td>';
                content += '<td>' + val.lastName + '</td>';
                content += '<td>' + val.cin + '</td>';
                content += '<td>' + val.numTel + '</td>';
                content += '<td>' + val.pw + '</td>';
                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>
</body>
</html>

Answer 1

您嘗試的代碼與解決方案相差不遠！ （我修改了你的問題以包含這個新代碼）。

有三個問題：

顯然，您的Firebase項目在HTML頁面中拼寫錯誤。 您將收到類似"FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (https://sosservice.firebaseio.com)" 。
通過執行database.ref(users).once('value', function(snapshot) {})您將變量用戶傳遞給ref()方法，但users未在任何地方定義。 您需要傳遞字符串'users' ，如下所示： database.ref('users').once('value', function(snapshot) {}) 。
通過$('#ex-table').append(content); 這意味着您正在使用着名的jQuery庫。 為此，您需要在頁面中包含jQuery JavaScript文件。 您可以下載它或指向CDN托管的版本，請參閱https://jquery.com/download/

因此，以下代碼應該可以正常工作，假設Firebase配置已正確聲明。

<!DOCTYPE html>
<html>
  <head>
    <title>Testing a table</title>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
      // Initialize Firebase
      var config = {
          apiKey: "AIzaSyBgXArM80ikVWaTWincfffsYa85I31uf0",
          authDomain: "sosservice-1b5a7.firebaseapp.com",  //Check here!!
          databaseURL: "https://sosservice.firebaseio.com",
          projectId: "sosservice-1b5a7",
          storageBucket: "sosservice-1445e.appspot.com",
          messagingSenderId: "1093429197188"
      };
      firebase.initializeApp(config);
    </script>
  </head>

  <body>
    <table style="width:100%" id="ex-table">
      <tr id="tr">
        <th>First Name</th>
        <th>Last Name</th>
        <th>CIN</th>
        <th>Tel</th>
        <th>Pass</th>
      </tr>
    </table>

    <script>
      var database = firebase.database();
      database.ref('users').once('value', function(snapshot) {
        if (snapshot.exists()) {
          var content = '';
          snapshot.forEach(function(data) {
            var val = data.val();
            content += '<tr>';
            content += '<td>' + val.firstName + '</td>';
            content += '<td>' + val.lastName + '</td>';
            content += '<td>' + val.cin + '</td>';
            content += '<td>' + val.numTel + '</td>';
            content += '<td>' + val.pw + '</td>';
            content += '</tr>';
          });
          $('#ex-table').append(content);
        }
      });
    </script>
  </body>
</html>

如何從firebase檢索信息並使用javascript將其顯示在HTML表格中

問題描述

1 個解決方案

解決方案1
0 已采納 2019-05-13 07:29:51

如何從firebase檢索信息並使用javascript將其顯示在HTML表格中

問題描述

1 個解決方案

解決方案1 0 已采納 2019-05-13 07:29:51

解決方案1
0 已采納 2019-05-13 07:29:51