在HTML网页

Question

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

数据格式就像这张图片一样：

根据上图：
在可用节点中，UserData是包含名称，email，assigned-id

的节点

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

我只需要存在与Attr1和Attr3相关的值。

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

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

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

Answer 1

您需要更改两件事1.使用jquery而不是使用get元素，以及它不会覆盖自身使用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，因为这没有＆t; t使用正常的js东西）...

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

对于每个名称和id

，这都是这样的

名称ID

名称ID

名称ID

您也可以使用此方法将数据从数据库输入到表格中，方法是将每个项目放入标签中等等，如果您不知道即时通讯了解html表格，那么不言而喻。

Answer 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

希望这有帮助！