Firebase - 从数据库数据生成表

Question

我想知道如何从firebase数据库中的某些数据创建这样的表，如下所示

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

提前谢谢。

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