Firebase - 从数据库数据生成表答案

【问题标题】：Firebase - Generate table from database dataFirebase - 从数据库数据生成表
【发布时间】：2018-03-14 17:30:10
【问题描述】：

我想知道如何从这样的 firebase 数据库中的一些数据创建这样的表

需要有一列用于 ID、标题、答案数量、正确答案和类型。最好这应该使用 jQuery 来完成。

提前谢谢你。

【问题讨论】：

创建表是什么意思？ Firebase 数据库没有行和列，也没有表——只有父节点和子节点，它们是键：值对（想想：字典）。你想要什么样的桌子？一个 SQL 表？二维数组？一组类？ “桌子”需要什么？我们确实需要更多数据来提供答案 - 也许向我们提供一个用例并展示您迄今为止所做的尝试将有助于我们更好地了解您正在尝试做什么。
我的意思是一个 HTML 表格
试过Datatable

标签： javascript jquery json firebase firebase-realtime-database

【解决方案1】：

获取数据

读取 firebase 数据库 documentation 和 references。

基本的 firebase 读取操作如下所示：

var ref = firebase.database().ref("location");
ref.once("value")
  .then(function(snapshot) {
    var key = snapshot.key;
    var value = snapshot.val();

    console.log(key + ": " + value);
  });

当然你必须在之前为firebase and firebase database添加脚本。

如果你想循环一个数据你可以使用forEach函数，例如：

var query = firebase.database().ref("location2");

query.once("value").then(function(snapshot) {
  snapshot.forEach(function(childSnapshot) {
    var key = childSnapshot.key;
    var value = childSnapshot.val();

    console.log(key + ": " + value);
  });
});

表格

您可以使用 JS 动态创建表格 - 像 createElement 和 createDocumentFragment 这样的函数

例如：

var fragment = document.createDocumentFragment();
var animalsArray = ["Elephant", "Dog", "Cat"];

var table = document.createElement("table");

for (var i = 0; i < animalsArray.length; i++) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");

  td.textContent = animalsArray[i];

  tr.appendChild(td);
  table.appendChild(tr);
}

fragment.appendChild(table);
document.body.appendChild(fragment);

根据 Firebase 数据库中的数据构建的表

现在将上面的概念连接在一起。创建一个表。从 firebase 数据库中获取数据。在每次对这些数据进行迭代时：使用由元素的键和值构建的单元格创建新的表格行。在下面的示例中，我使用 for 循环不为每个单元格重复相同的操作。

完整示例：

Firebase 数据库中的数据树：

{
  "location2" : {
    "hello" : "world",
    "hi" : "Mark"
  }
}

代码：

var fragment = document.createDocumentFragment();
var table = document.createElement("table");

var query = firebase.database().ref("location2");

query.once("value").then(function(snapshot) {
  snapshot.forEach(function(childSnapshot) {
    var tr = document.createElement("tr");
    var trValues = [childSnapshot.key, childSnapshot.val()];

    for (var i = 0; i < trValues.length; i++) {
      var td = document.createElement("td");

      td.textContent = trValues[i];
      tr.appendChild(td);
    }

    table.appendChild(tr);
  });
});

fragment.appendChild(table);
document.body.appendChild(fragment);

【讨论】：