javascript - 使用每个 Firebase 条目一个条目填充容器

Question

我正在使用 Firebase 存储用户信息，并且希望使用每个用户信息填充 div，以便可以接受或删除该信息(但不会从 Firebase 中删除)。

所以我希望它的结构如下:

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

我目前返回的是这样的:

根据 Firebase 中的数据量生成 div 并按指定格式设置内容格式的正确方法是什么？

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 元素(即，所有名称都附加到 id 为“name”的 h4 元素，所有电子邮件附加到 id 为“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);

  });
});

灵感来自How to insert row in HTML table body in Javascript? 。请参阅这篇 SO 帖子中的 fiddle 。

或者你可以使用 div 来完成，这里是一个可能的代码:.

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   

  });
});

<小时/>

为了完整起见，请注意，您还可以使用一些 MVVM javascript 框架，例如 vue.js、knockout.js 以及 Angular、React...，以便轻松在 HTML DOM 中反射(reflect)查询结果到您的后端(反之亦然)。