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

【问题标题】：How can I retrieve information from firebase and display it in a HTML table using javascript如何从 firebase 检索信息并使用 javascript 在 HTML 表中显示它
【发布时间】：2019-05-12 15:32:01
【问题描述】：

谁能帮助我，这是我的 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>

【问题讨论】：

如果你只用谷歌搜索你的问题的标题，你会找到几个答案：google.com/…。例如labs.bawi.io/…
我在 google 中找到了很多答案，但没有一个是可以完美运行的清晰代码
你试过什么代码，有什么问题？我们将帮助您了解如何修复它。但我们不会从头开始写这该死的东西。
我试过这个代码：pastebin.com/raw/dQBUYuYt 但它没有显示任何东西
最好将代码和结构包含为文本，而不是链接和图像。要获取您的 Firebase 结构，请使用 Firebase 控制台->导出 JSON，然后复制并粘贴您的结构的 sn-p。见images and links are evil

标签： javascript html json database firebase

【解决方案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) {})，您将变量users 传递给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>

【讨论】：

非常感谢，我修复了代码，现在它可以正常工作了:)