FirebaseデータベースのデータをHTMLページに表示

Question

FirebaseとJSを初めて使用しています。 Firebaseデータベースに保存されているWebページにユーザー情報を表示しようとしています。

上の画像に基づいて

：使用可能なノードから
、UserDataのは名前、電子メール、割り当てられたIDを保持している1がある

データ形式は、この画像のように何かであります

私はUser1/User2/User3を表示する必要はなく、HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35のように読むことはできません。

Attr1とAttr3に関連付けられた値は、そこに存在するすべてのユーザーに必要です。

ここでは、このデータをフェッチして、HTMLの1つのWebページに表形式で表示したいと考えています。

名前|割り当てられたID
___________________
名前1       |     ID 1
名前1       |     ID 2
名前3       |     ID 3

私はいくつかのチュートリアルを見てきましたが、明確ではありませんでした。

これはJavascriptコードです。チュートリアルの基礎を書いており、データベース全体ではなく1つのレコードしか表示されません。 これはデータベースで使用できる最後のレコードです。 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

あなただけの最後の項目を見ている理由は、あなただけの同じ場所に上書き/書き込み、新しいアイテムを作成していないため、これらの2行

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

希望：

は限りソートが行くように、firebase DOCのこのページをチェックしてください！

Answer 2

変更する必要があるのは2つあります。idでget要素を使用する代わりに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); 

    }); 
}); 

この考え出力データベース項目を次々とあなたがこのようなことを行うことができますすべてのデータベース項目に書式設定を追加する（あなたはこののdidnとしてのjQueryを使用するために持っている理由によって、これがあります「tは通常のJSのもので動作）...

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

これは、すべての名前を次のようになりますとid

名ID

あなたが知らない場合にも、その上のタグ内の各項目を置くことによって、テーブルにあなたのデータベースからあなたのデータを入力するためにこれを使用している可能性が

名前ID

名前ID

ちょうど約何のIMの上でhtmlのテーブルを学びに行くと、その自明の説明です。