在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數據庫的數據

回答

相關問題