Question

我是新的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>

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

提前致谢

Answer 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>

从实时firebase中检索数据并以网页上的表格形式显示

1 个答案: