在HTML页面中显示来自Firebase数据库的数据 [英] Display data from Firebase database in a HTML page

查看:447
本文介绍了在HTML页面中显示来自Firebase数据库的数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



数据格式如下图所示:





基于上面的图片:
从可用节点中,UserData是包含姓名,email,assigned-id



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



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



现在,我想获取这些数据并以表格的形式显示在网页(HTML之一)中。



名称|已分配ID

___________________

姓名1    |    ID 1

姓名1    |    ID 2

姓名3    |    ID 3



我看过一些教程,但他们不清楚和有帮助。

<这是我写的一些教程的Javascript代码,只有一条记录从数据库中显示,而不是整个 -
这也是数据库中可用的最后一条记录,我可以显示相同的AssignedID值的排序顺序

$ $ p $
//初始化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 = childSnapsho t.key;
var childData = childSnapshot.val(); // childData将是孩子的实际内容

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

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

解决方案

有两件事你需要改变1.而不是使用get元素id使用jquery所以它不会覆盖自己使用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的东西)...

<$ p $ append(< p> + name_val +< / p>< p>+ id_val +< / p>
>);

对于每个名称和id,这看起来都是这样的



你也可以用它来把你的数据库中的数据输入到一个表格中,把每个项目放在一个标签中所以,如果你不知道什么即时通讯只是去了解HTML表格,从它不言自明。


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.

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

I don't require to show User1/User2/User3, they are unreadable such as HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.

I just need the Values associated with Attr1 and Attr3 for all the users there exists.

Now, I would like to fetch this data and show it in a webpage(one of HTML) in a tabular format.

Name | Assigned ID
___________________
Name 1   |    ID 1
Name 1   |    ID 2
Name 3   |    ID 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

 (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.

解决方案

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.

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)...

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

This would look like this for every name and id

Name Id

Name Id

Name 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.

这篇关于在HTML页面中显示来自Firebase数据库的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆