javascript - 将数据从 firebase 加载到 HTML 表
问题描述
我有一个 FireBase 实时数据库,其中包含一些我想在 HTML 网格中显示的数据。数据库的结构非常简单:
我想要做的是将“id”、“第一列”、“第二列”、“第三列”作为列标题和来自 DB 的数据显示在每个相应的标题下。
这是我的 HTML 部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--Firebase SDK code below-->
<script src="/__/firebase/8.2.6/firebase-app.js"></script>
<script src="/__/firebase/8.2.6/firebase-analytics.js"></script>
<script src="/__/firebase/8.2.6/firebase-database.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="firebase.js"></script>
<button onClick="readData()">Load data from FB</button>
<table class="table table-striped" id="table">
<thead>
<tr>
<th>ID</th>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
</tr>
</thead>
<tbody>
</body>
</html>
JS在这里:
// Firebase reference
var database = firebase.database();
rootRef = database.ref('/');
itemsRef = database.ref('/Items/');
// Other vars
var pushLabels = ["id", "First column", "Second column", "Third column"];
function readData() {
itemsRef.once('value', function (snapshot) {
var arrayLen = pushLabels.length;
var childKeyArr = [];
var table = document.querySelector('#table tbody');
snapshot.forEach(function (childSnapshot) {
var childKey = childSnapshot.key;
childKeyArr.push(childKey);
});
for (var i = 0; i < childKeyArr.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < arrayLen; j++) {
cell = row.insertCell(-1);
};
};
for (var i = 0; i < childKeyArr.length + 1; i++) {
database.ref('/Items/' + i).once('value', function (snapshot) {
snapshot.forEach(function (childSnapshot) {
var noha = childSnapshot.val();
for (var i = 0; i < pushLabels.length; i++) {
cell.innerHTML = noha;
};
});
});
}
});
}
我认为这很“过于复杂”。我能够根据数据库中父项的数量(1、2、3,如数据库层次结构屏幕截图所示)创建行,并且对于每个节点,我都能够将数据检索到快照中,但我不知道如何将其投影到网格,以便每个值正确显示到它的相关列。我将某些东西放入单元格的部分在我的代码中显然是错误的——我只是在测试不同的方式。
任何帮助将不胜感激!此外,如果有任何更好的解决方案,一些可以以更简单的方式做到这一点的库,如果你能推荐,我会很高兴。谢谢!!
解决方案
是否有固定数量的列,或者您想动态创建列?您的列标题是否已经在 html 文件中,或者您是否希望从数据库中的键中创建它们?您的 html 文件中有列标题,但您也有一个存储相同内容的数组。它们还匹配每个子项的键,因此看起来有点混乱。
这是一个快速示例,说明如何获取表格主体、创建新行、创建单元格、添加数据库中的值,然后将行添加到表格主体。
var itemsRef = firebase.database().ref().child("Items");
var tableBody = document.querySelector('#table tbody');
function readData() {
itemsRef.once('value', function (snapshot) {
snapshot.forEach(function (item_snapshot) {
//Create html elements, TRs, TD,s etc.
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var col3 = document.createElement("td");
var col4 = document.createElement("td");
//Add data to the new elements.
col1.innerText = item_snapshot.key;
col2.innerText = item_snapshot.child("First column").val();
col3.innerText = item_snapshot.child("Second_column").val();
col4.innerText = item_snapshot.child("Third_column").val();
//Append the cells into the row and the row into the table body.
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);
tableBody.appendChild(row);
});
});
}
如果我没有误解你,这听起来有点像你想让每个子项的键成为列标题,但请记住,每个子项中可能没有相同的节点,你只想加载标题一次,而不是来自每个子项。
推荐阅读
- python - Python是否在每个步骤中计算列表理解条件?
- python - 如果 K 相同,为什么 Kmeans 会产生相同的质心
- php - 未找到列:1054 'where 子句'中的未知列 'MONTH(date)'
- java - FnProject java 函数,其依赖项托管在私有存储库上
- python - 在 Visual Studio (VS) 代码中调试 Python/C++ 的混合代码
- excel - Excel 插件:单击指向不同域的链接有效,但使用 JS 更改位置无效
- python - 步骤功能:批处理总是在异常抛出时返回 State.TaskFailed 错误
- javascript - 如何从 Crome Network 获取数据
- r - 如何创建一个组合不同变量 (R) 的所有值的数据框?
- python - 找到从 A 到 B 并经过 C 的圆形路径