从实时 Firebase 中检索数据并在网页上以表格形式显示答案

【问题标题】：Retrieving data from realtime firebase and display in form of table on web page从实时 Firebase 中检索数据并在网页上以表格形式显示
【发布时间】：2018-03-29 00:43:43
【问题描述】：

我是新的 firebase，所以我尝试了所有可能的方法来从我的实时数据库中获取数据，但不幸的是我不知道该怎么做？

<body>
<div id="bg">
  <img src="images/inventory.jpg" alt="">
</div>
<a href="#">
  <img id="logo" src="images/sitelogo.jpg" alt="Skype Logo">
</a>
<!--<form action="" method="post">
<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Category</th>
    <th>Name</th> 
    <th>Quantity</th>
</table>-->
<!--<p id="name">Name</p>
<p id="quantity">Quantity</p> -->
<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Category</th>
    <th>Name</th> 
    <th>Description</th>
</table> 
<script>
    var database = firebase.database();
    database.ref('Inventory').once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.category + '</td>';
                content += '<td>' + val.name + '</td>';
                content += '<td>' + val.quantity+ '</td>';
                content += '</tr>';
            });
            $('#ex-table').append(content);
        }
    });
</script>
<nav>
 <ul>
  <li><a href="addinventory.html">Add Inventory</a></li>
  <li><a href="viewinventory.html">View Inventory</a></li> 
</ul>
</nav> 
</body>
</html>

此代码未显示 y 实时数据以及行 $('#ex-table').append(content); 引发错误 $ is not defined。我正在附加我的数据库和当前工作完成 .这是我的网页，还有一个错误是我的表格标题没有出现在导航栏下方。

提前致谢

【问题讨论】：

.once('value') 会得到一个快照，只有一次......它不会实时更新。而是看看 - 它不会实时更新。请尝试查看.on('value') - 每次数据更改时都会触发。 firebase.google.com/docs/database/web/…
$ 未定义，因为您正在尝试使用 jQuery 运算符。是否包含了 jquery 库？
使用.innerHTML 放置/解析它，或者使用.createElement 代替连接字符串
firebase.database(); 是什么？我不知道。 $ 未定义意味着您必须添加 jquery 文件

标签： javascript html css firebase firebase-realtime-database

【解决方案1】：

您必须在页面中添加一个 jQuery 文件。链接到jquery： https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

// See https://firebase.google.com/docs/web/setup#project_setup for how to auto-generate this config
var config = {
  apiKey: "apiKey",
  authDomain: "your-firebase-project-id.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com"
};

firebase.initializeApp(config);

var database = firebase.database();

database.ref('Inventory').once('value', function(snapshot) {
  if (snapshot.exists()) {
    var content = '';
    snapshot.forEach(function(data) {
      var val = data.val();
      content += '<tr>';
      content += '<td>' + val.category + '</td>';
      content += '<td>' + val.name + '</td>';
      content += '<td>' + val.quantity + '</td>';
      content += '</tr>';
    });
    $('#ex-table').append(content);
  }
});

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="bg">
    <img src="images/inventory.jpg" alt="">
  </div>
  <a href="#">
    <img id="logo" src="images/sitelogo.jpg" alt="Skype Logo">
  </a>
  <table style="width:100%" id="ex-table">
    <tr id="tr">
      <th>Category</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </table>
  <nav>
    <ul>
      <li><a href="addinventory.html">Add Inventory</a></li>
      <li><a href="viewinventory.html">View Inventory</a></li>
    </ul>
  </nav>
</body>

</html>

【讨论】：