从实时 firebase 中检索数据并在网页上以表格形式显示 [英] Retrieving data from realtime firebase and display in form of table on web page

查看：32 发布时间：2021/9/23 20:10:40 javascript html css firebase firebase-realtime-database

本文介绍了从实时 firebase 中检索数据并在网页上以表格形式显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<div id="bg"><img src="images/inventory.jpg" alt="">

<a href="#"><img id="logo" src="images/sitelogo.jpg" alt="Skype 标志"></a><table style="width:100%" id="ex-table"><th>类别</th><th>姓名</th><第>描述<脚本>var 数据库 = firebase.database();database.ref('Inventory').once('value', function(snapshot){如果(快照.存在()){var 内容 = '';快照.forEach(函数(数据){var val = data.val();content +='';内容 += ''+ val.category + '</td>';内容 += ''+ val.name + '';内容 += ''+ val.quantity+ '</td>';内容 += '</tr>';});$('#ex-table').append(content);}});<导航><ul><li><a href="addinventory.html">添加库存</a></li><li><a href="viewinventory.html">查看库存</a></li></nav></html>

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

提前致谢

解决方案

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

//请参阅 https://firebase.google.com/docs/web/setup#project_setup 了解如何自动生成此配置变量配置 = {apiKey: "apiKey",authDomain: "your-firebase-project-id.firebaseapp.com",数据库网址:https://databaseName.firebaseio.com"};firebase.initializeApp(config);var 数据库 = firebase.database();database.ref('Inventory').once('value', function(snapshot) {如果(快照.存在()){var 内容 = '';快照.forEach(函数(数据){var val = data.val();内容 += '';内容 += ''+ val.category + '</td>';内容 += ''+ val.name + '';内容 += ''+ val.quantity + '</td>';内容 += '</tr>';});$('#ex-table').append(content);}});

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></脚本><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><身体><div id="bg"><img src="images/inventory.jpg" alt="">

<a href="#"><img id="logo" src="images/sitelogo.jpg" alt="Skype 标志"></a><table style="width:100%" id="ex-table"><th>类别</th><th>姓名</th><第>描述</tr><导航><ul><li><a href="addinventory.html">添加库存</a></li><li><a href="viewinventory.html">查看库存</a></li></nav></html>

I am new firebase so i tried all possible ways to fetch the data from my real time database but unfortunately I am not getting how to do it?

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

This code is not displaying y real time data as well as line $('#ex-table').append(content); is throwing an error that $ is not defined.I am attaching my database and current work done .This is my web page and there is one more error that My table header is not coming below nav bar.

Thanks in advance

解决方案

You have to add a jQuery file in you page. Link to 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 中检索数据并在网页上以表格形式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

从实时 firebase 中检索数据并在网页上以表格形式显示 [英] Retrieving data from realtime firebase and display in form of table on web page

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

从实时 firebase 中检索数据并在网页上以表格形式显示 [英] Retrieving data from realtime firebase and display in form of table on web page

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭