FirebaseからHTMLページにデータを引き出す方法は？

Question

私はユーザからの入力としてnameとemailを取る簡単なユーザー登録Webアプリケーションを開発しています。オンラインデータストアとしてFirebaseを使用しました。 （jQueryのを使用します）

databaseRef.orderByKey() 
    .once('child_added', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 

     var childKey = childSnapshot.key; 
     var childData = childSnapshot.val(); 

     console.log("Key: " + childKey + "; Value: " + childData); 

     $('#nameValue').text(childData); 
     $('#emailValue').text(childData); 
    }); 
    }); 

HTMLコード：JavaScriptのファイル

<div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td id='nameValue'></td> 
        <td id='emailValue'></td> 
       </tr> 

      </tbody> 
     </table> 
    </div> 
    </div> 

これはFirebaseの私のデータベース構造です。

users 
    | 
    -KhyubUqLRGUGW-rtija 
     |--- email: "p1@gmail.com" 
     |--- name: "p1" 

ブラウザコンソールでこれらの値を取得できます。

Key: email; Value: p1@gmail.com 
Key: name; Value: p1 

私はHTMLページに表示できません。私のHTMLページに内容を表示するために、JQuery関数に何ができるのですか？

これは、詳細を送信するときに表示される現在の出力です。

Answer 1

まず.text()は、あなたがそれを呼び出すたびに、それは以前のデータが上書きされます。すなわち、テキストを置き換えて、あなたが必要とする追加され

$('#nameValue').append(childKey); 
$('#emailValue').append(childData); 

代わりの

$('#nameValue').text(childKey); 
$('#emailValue').text(childData); 

を使用データを以前のデータに変換します。

第2に、テーブルにデータを追加する際に間違いがあります。何を行うべきことである：私はので、それは正しくないHTMLのテーブル構造につながる付加した後、あなたの...の行を削除した

<div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
       </tr> 
      </thead> 

       <tbody id="data"> <!-- changed --> 

      </tbody> 
     </table> 
    </div> 
    </div> 

注意：更新されたHTMLコードで

$("#data").append('<tr><td>' + childKey + '</td><td>'+ childData+'</td></tr>'); 

。これは、あなたがW3school example が今では、あなたがあなたのデータベース内にあるkeysを指定することができ、あなたのテーブルの列の代わりに使用して、あなたのテーブルの<th>に固定値をハードコーディングする

Answer 2

に適切に追加されますしたい構造体です。あなたはテーブルのデータでも同じことをすることができます。すなわちvaluesをそれぞれkeysとする。

はこれにあなたのHTMLコードを変更します。

<div class="table-responsive"> 
    <table class="table"> 
    <thead> 
     <tr id="keysRow"></tr> 
    </thead> 
    <tbody> 
     <tr id="valuesRow"></tr> 
    </tbody> 
    </table> 
</div> 

これはあなたのFirebaseからデータを取得する方法です。

databaseRef 
    .once('child_added', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 

     var childKey = childSnapshot.key; 
     var childData = childSnapshot.val(); 

     console.log(childKey + " - " + childData); // Displays key with its value in your Browser Console 

     $('#keysRow').append('<th>' + childKey + '</th>'); 
     $('#valuesRow').append('<td>' + childData + '</td>'); 

    }); 
    });