html - 在 HTML 页面中显示来自 Firebase 数据库的数据

Question

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

数据格式如下图:

基于上图:
在可用节点中，UserData 是保存姓名、电子邮件、分配的 id 的节点

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

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

现在，我想获取此数据并将其以表格格式显示在网页(HTML 之一)中。

名字 |分配的 ID
__________________
姓名 1 |编号 1
姓名 1 |编号 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

您需要更改两件事 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

名称 ID

名称 ID

你也可以用它把你的数据从你的数据库输入到一个表中，方法是把每个项目放在一个标签中等等，如果你不知道我在说什么，那就去学习 html 表，然后从它开始不言自明。