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 个答案: