在 HTML 页面中显示 Firebase 数据库中的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42684712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display data from Firebase database in a HTML page
提问by Prashanth kumar
I am new to Firebase and JS. I am trying to display some user information on a web-page that is stored in Firebase database.
我是 Firebase 和 JS 的新手。我试图在存储在 Firebase 数据库中的网页上显示一些用户信息。
Data format is something as this image:
数据格式如下图所示：
Based on the image above :
From the available nodes, UserData is the one that holds the name, email, assigned-id
基于上图：
从可用节点中，UserData 是保存名称、电子邮件、分配 ID 的节点
I don't require to show User1/User2/User3, they are unreadable such as HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.
我不需要显示 User1/User2/User3，它们是不可读的，例如HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.
I just need the Values associated with Attr1 and Attr3 for all the users there exists.
对于存在的所有用户，我只需要与 Attr1 和 Attr3 关联的值。
Now, I would like to fetch this data and show it in a webpage(one of HTML) in a tabular format.
现在，我想获取这些数据并以表格格式将其显示在网页（HTML 之一）中。
Name | Assigned ID
___________________
Name 1 | ID 1
Name 1 | ID 2
Name 3 | ID 3
姓名 | 分配的 ID
___________________
姓名 1 | ID 1
姓名 1 | ID 2
姓名 3 | 身 3
I have seen some tutorials but they weren't clear and helpful.
我看过一些教程，但它们并不清晰和有帮助。
This is the Javascript code I have written basis some tutorials, and only one record is being displayed from the database, rather than whole - Also this is the last record available in the database, can i display the same in the sorted order of AssignedID value
这是我在一些教程的基础上编写的 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;
});
});
}());
Can someone kindly help me achieve this? Thanks in advance.
有人可以帮助我实现这一目标吗？提前致谢。
回答by Freddy Cunningham
There are two things you need to change 1. instead of using get element by id use jquery and also so that it doesn't overwrite itself use append to list the select items from the database.
您需要更改两件事 1. 使用 jquery 而不是通过 id 使用 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);
});
});
This on its own would output your database items one after the other and so to add formatting to every database item you can do things like this (by the way this is why you have to use jquery as this didn't work with the normal js stuff)...
这本身会一个接一个地输出您的数据库项目，因此要为每个数据库项目添加格式，您可以执行这样的操作（顺便说一句，这就是您必须使用 jquery 的原因，因为这不适用于普通的 js东西）...
$("#name").append("<p>" + name_val + "</p><p> " + id_val + "</p>
<br>");
This would look like this for every name and id
对于每个名称和 ID，这看起来像这样
Name Id
名称 ID
Name Id
名称 ID
Name Id
名称 ID
You could also have used this for entering you data from your database into a table by putting each item in a tag and so on if you don't know what im on about just go learn about html tables and from then on its self-explanatory.
您也可以使用它来将您的数据从您的数据库输入到一个表中.
回答by Howie
The reason you are only seeing the last item is because of these 2 lines
您只看到最后一项的原因是因为这两行
document.getElementById("name").innerHTML = name_val;
document.getElementById("id").innerHTML = id_val;
You're not creating new items, just writing/overwriting in the same spot. Each item replaces the name/id of the one before until the last item. Consider using element.appendChild()to add the items to an <li>element.
您不是在创建新项目，只是在同一位置写入/覆盖。每一项都替换前一项的名称/ID，直到最后一项。考虑使用element.appendChild()将项目添加到<li>元素。
As far as sorting goes, check out this page of the firebase doc: https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data
就排序而言，请查看 firebase 文档的此页面：https: //firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data
Hope this helps!
希望这可以帮助！
