Заполнение контейнера одной записью для каждой записи Firebase

Question

Я использую Firebase для хранения информации о пользователях и хочу заполнить div информацией о каждом пользователе, чтобы ее можно было принять или удалить (но не удалить из Firebase).

Итак, я хотел, чтобы это было структурировано примерно так:

---------------------- 
Name 
Email 
Date
---------------------- 
Name 
Email 
Date
---------------------- 
and so on....

То, что я сейчас получаю, выглядит примерно так:

Как правильно генерировать div в зависимости от объема данных в Firebase и форматировать содержимое как указано?

HTML:

<div>Some entry here
    <h4 id="name"></h4>
    <h4 id="date"></h4>
    <h6 id="email"></h6>
    <button id="0" class="remove">Remove</button>
  </div>
  <div>Another entry here
    <button id="1" class="remove">Remove</button>
  </div>

Javascript:

var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');
    $('#name').append(name);
    $('#email').append(email);
    $('#date').append(date);
  });
});

Answer 1

Для каждого дочернего элемента вы добавляете значения к одним и тем же элементам HTML (то есть все имена добавляются к элементу h4 с идентификатором «name», все электронные письма к одному с идентификатором «email» и т. Д.).

Так что, как правило, они отображаются в строке (одна строка).

Вы должны создать новый заполнитель для каждого дочернего элемента (и его набора значений). Вы можете сделать это, например, стол, как:

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];


var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    // Insert a row in the table at the last row
    var newRow = tableRef.insertRow(tableRef.rows.length);
    // Insert a cell in the row at index 0
    var newCell = newRow.insertCell(0);
    // Append a text node to the cell with name value
    var newText = document.createTextNode(name);  // <-- name value from the child
    newCell.appendChild(newText);

    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(email);  // <-- email value from the child
    newCell.appendChild(newText);

    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(date);  // <-- date value from the child
    newCell.appendChild(newText);

  });
});

Вдохновлен Как вставить строку в тело HTML-таблицы в Javascript? . Смотрите скрипку в этом посте.

Или вы можете сделать это с помощью divs, вот возможный код:.

HTML

<div id="parentDiv"></div>

JavaScript

var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    element = document.createElement("div");
    element.appendChild(document.createTextNode(name));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(email));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(date));
    document.getElementById('parentDiv').appendChild(element);   
    //You could add a specific css class to this div to generate the bottom border   

  });
});

---

В завершение обратите внимание, что вы также можете использовать некоторые JavaScript-фреймворки MVVM, такие как vue.js, knockout.js, а также angular, реагировать ... для того, чтобы легко отражать в вашем HTML DOM результаты запросов. на ваш бэкэнд (и наоборот).