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

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

数据格式是什么，因为这形象：

Click here for image

基于上面的图片：
从可用的节点，的UserData是一个包含姓名，电子邮件，分配-ID的一个

我不需要显示用户1 /用户2 /用户3，他们是不可读的，如HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35。

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

，我想取这个数据，并将其显示在表格格式的网页（HTML之一）。

名称|分配的ID
___________________
名称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; 
    }); 
}); 
}());

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

来源

2017-03-09 Prashanth kumar

你只看到了最后一个项目的原因是因为这两条线

document.getElementById("name").innerHTML = name_val; 
document.getElementById("id").innerHTML = id_val;

你不是创建新的项目，只是写/在同一地点覆盖的。每个项目都会替换之前的名称/ ID，直到最后一个项目。考虑使用element.appendChild()将项目添加到<li>元素。

至于排序的时候，看看这个页面的火力文档的：https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

希望这有助于！

来源

2017-04-12 23:18:43 Howie

有两件事情你需要改变1，而不是使用get元素的ID使用jQuery，也使得它不会覆盖单独使用追加列出从数据库中选择项目。

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与正常的js的东西）工作...

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

这应该是这样的，每名和ID

名称标识

你也可以用这个进入您的数据从数据库到表通过把每个项目的标签等，如果你不知道关于HTML表格的内容，从那里不言而喻。

来源

2017-07-20 15:02:50

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

回答

相关问题