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

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>

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

提前致谢

Answer 1

您必须在页面中添加一个jQuery文件。 链接到jquery： https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js : 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 个解决方案

解决方案1
0 2018-09-10 09:10:05

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

问题描述

1 个解决方案

解决方案1 0 2018-09-10 09:10:05

解决方案1
0 2018-09-10 09:10:05