Firebase - создать таблицу из данных базы данных

Получить данные

Прочтите базу данных firebase документация и Рекомендации.

Базовая операция чтения firebase выглядит так:

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

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

Конечно, вам нужно заранее добавить скрипты для база данных firebase и firebase.

Если вы хотите перебрать данные, вы можете использовать функцию для каждого, например:

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.info(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);