在 HTML 页面中显示 Firebase 数据库中的数据答案

【问题标题】：Display data from Firebase database in a HTML page在 HTML 页面中显示 Firebase 数据库中的数据
【发布时间】：2017-07-29 19:27:19
【问题描述】：

我是 Firebase 和 JS 的新手。我正在尝试在存储在 Firebase 数据库中的网页上显示一些用户信息。

数据格式如下图：

根据上图：
在可用节点中，UserData 是包含名称、电子邮件、分配 ID 的节点

我不需要显示 User1/User2/User3，它们是不可读的，例如 HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35。

对于所有存在的用户，我只需要与 Attr1 和 Attr3 关联的值。

现在，我想获取这些数据并以表格格式将其显示在网页（HTML 之一）中。

姓名 |分配的 ID
___________________
姓名 1   |编号 1
姓名 1   |编号 2
姓名 3   | ID 3

我看过一些教程，但不是很清楚也没有帮助。

这是我在一些教程的基础上编写的 Javascript 代码，数据库中只显示一条记录，而不是全部 - 这也是数据库中可用的最后一条记录，我可以按照 AssignedID 值的排序顺序显示吗

 (function(){
// Initialize Firebase
var config = {
    apiKey: "Aaasff34eaADASDAS334444qSDASD23ASg5H",
    authDomain: "APP_NAME.firebaseapp.com",
    databaseURL: "https://APP_NAME.firebaseio.com",
    storageBucket: "APP-NAME.appspot.com",
    messagingSenderId: "51965125444878"
};
firebase.initializeApp(config);

var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();              // childData will be the actual contents of the child

      var name_val = childSnapshot.val().Name;
      var id_val = childSnapshot.val().AssignedID;
      document.getElementById("name").innerHTML = name_val;
      document.getElementById("id").innerHTML = id_val;
  });
 });
}());

有人可以帮我实现这一目标吗？提前致谢。

【问题讨论】：

标签： html firebase firebase-realtime-database

【解决方案1】：

您需要更改两件事 1. 使用 jquery 代替通过 id 获取元素，并且它不会覆盖自身，使用 append 列出数据库中的选择项。

var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  var key = childSnapshot.key;
  var childData = childSnapshot.val();              

  var name_val = childSnapshot.val().Name;
  var id_val = childSnapshot.val().AssignedID;

  $("#name").append(name_val);
  $("#id").append(id_val);

  });
});

这本身会一个接一个地输出您的数据库项目，因此要为每个数据库项目添加格式，您可以执行此类操作（顺便说一下，这就是您必须使用 jquery 的原因，因为这不适用于正常的js东西）...

$("#name").append("<p>" + name_val + "</p><p> " + id_val + "</p>
<br>");

对于每个名称和 ID，这看起来像这样

姓名 ID

如果你不知道我在说什么，你也可以使用它来将数据库中的数据输入到表中不言自明。

【讨论】：

【解决方案2】：

您只看到最后一项的原因是因为这两行

 document.getElementById("name").innerHTML = name_val;
 document.getElementById("id").innerHTML = id_val;

您不是在创建新项目，而是在同一个位置写入/覆盖。每一项都替换前一项的名称/ID，直到最后一项。考虑使用element.appendChild() 将项目添加到<li> 元素。

就排序而言，请查看 firebase 文档的此页面：https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

希望这会有所帮助！

【讨论】：