时间戳

首页 > 解决方案 > 如何从 firebase 检索信息并使用 javascript 在 HTML 表中显示它

javascript - 如何从 firebase 检索信息并使用 javascript 在 HTML 表中显示它

问题描述

有人可以帮我吗，这是我的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>

标签： javascripthtmljsondatabasefirebase

解决方案

使用您尝试过的代码，您离解决方案并不远！（我修改了您的问题以包含此新代码）。

存在三个问题：

  1. 显然您的 Firebase 项目在 HTML 页面中的拼写不正确。您将收到类似的错误"FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (https://sosservice.firebaseio.com)"。
  2. 通过这样做database.ref(users).once('value', function(snapshot) {})，您将变量 users 传递给该ref()方法，但未users在任何地方定义。您需要传递字符串'users'，如下所示：database.ref('users').once('value', function(snapshot) {}).
  3. 这样做$('#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>

推荐阅读