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

Question

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

数据格式如下图所示：

基于上图：
从可用节点中，UserData 是保存名称、电子邮件、分配 ID 的节点

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

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

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

姓名 | 分配的 ID
___________________
姓名 1 | ID 1
姓名 1 | ID 2
姓名 3 | 身份证 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;
  });
 });
}());

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

Answer 1

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

 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

希望这可以帮助！