Firebaseデータベースからデータの配列を取得し、結果をHTMLページに取り込む方法は？

Question

私はFirebaseデータベースからデータの配列を生成し、その結果をHTMLページに移そうとしています。

これは私のデータベースのレイアウトです：

MYAPP 
    |_______chat 
    | 
    |_______users 
       |_____2eD8O9j2w 
       |    |____email 
       |    |____first_name 
       |    |____last_name 
       | 
       |_____7d73HR6d 
       |_____9ud973D6 
       |_____Kndu38d4 

私はusers内のすべての「電子メール」および「FIRST_NAME」フィールドの配列を取得することができるようにしたい、その後、自動的にリストを作成し、移入このデータからHTML形式に変換します。 （行ごとに2つのdiv要素が存在することになるの連絡先リストを作成するの種類など、：<td><div>first_name</div><div>email</div></td>）

これは私の現在の試行のデータをHTMLページを移入である：

HTML

（それは、代わりにHTMLコード内の空のものを作成する、作成とJavascriptの内部で自動的にこれらの行を移入することは可能ですか？）

<div> 
    <section> 
     <table> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
     </table> 
    </section> 
</div> 

Javascri PT

function createContactList(){ 
    var elements = document.getElementsByTagName('td'); 
    var contacts = []; 

    // Get a database reference to the users section 
    var ref = firebase.database().ref().child('/users'); 
    ref.on("value", function(element) { 
     return function (snapshot) { 
      console.log(snapshot.val());  

      // Loop through each HTML tag 
      for(var i = 0; i < elements.length; i++){ 

       element.innerHTML = snapshot.val(); 
       var tester = snapshot.val(); 

       console.log(tester.email); // This returns "undefined" 
       console.log(snapshot.val()); // This returns a list of User IDs 
       console.log(snapshot.val().email); // This returns "undefined" 
       console.log(snapshot.val(email)); // This shows the error: ``firebase Uncaught ReferenceError: email is not defined`` 

       var createarraytest = snapshot.email; 
       contacts.push({email: createarraytest});  
      } 
     }(elements[i]), 
     function (errorObject) { // Deal with errors 
     console.log("The read failed: " + errorObject.code); 
     }); 
    } 
       console.log(contacts); 
} 

私はこの関数を実行すると、以下のリストには、HTMLページに表示されます：

[OBJECT OBJECT] 
[OBJECT OBJECT] 
[OBJECT OBJECT] 
[OBJECT OBJECT] 
[OBJECT OBJECT] 

console.log(snapshot.val());は、ランダム化されたユーザーIDのリストを示します。 IDごとにemailとfirst_nameデータにアクセスしようとする試みで、私は次のことを試してみた：

var tester = snapshot.val(); 
console.log(tester.email); // This returns "undefined" 

console.log(snapshot.val().email); // This returns "undefined" 
console.log(snapshot.val(email)); // This shows the error: ``firebase Uncaught ReferenceError: email is not defined`` 

私はSQLデータベースとJavaScriptで配列を使用してために使用されるんだけど、私がアクセスする方法がわかりませんFirebaseがこのnoSQLデータベースで作成したランダムなユーザID文字列に含まれるデータ。

私はドキュメントと回答を以下に試してみました：Proper way to store values array-like in Firebaseしかし、私は今までそれを動作させることができませんでした。

これを動作させる助けがあれば、本当にありがとうございます、事前に感謝してください！

Answer 1

あなたの質問は多少幅があるので、あなたが尋ねている部分はわかりません。しかし、あなたがデータを取得してそれをループする方法は間違いなく問題を引き起こします。

データを取得するには、valueイベントを使用します。このイベントは、要求されたすべての子ノードのコレクションを含むスナップショットを返します。子どもたちをループする際、snapshot.forEach()を使用します。

var table = document.getElementsByTagName('table')[0]; 
ref.on("value", function(element) { 
    snapshot.forEach(function(child) { 
    console.log(child.key+': '+child.val()); 
    var tr = document.createElement('tr'); 
    var td = document.createElement('td'); 
    td.innerText = child.val().email + " --- " + JSON.stringify(child.val()); 
    tr.appendChild(td); 
    table.appendChild(tr); 
    }); 
}); 

それはあなたのコードを簡素化し、それが簡単に後から（例えばchild_deletedなど）他のイベントに応答するようになりますので、私は、代わりにchild_addedイベントをリスニングをお勧めします：

var table = document.getElementsByTagName('table')[0]; 
ref.on("child_added", function(child) { 
    console.log(child.key+': '+child.val()); 
    var tr = document.createElement('tr'); 
    var td = document.createElement('td'); 
    td.innerText = child.val().email + " --- " + JSON.stringify(child.val()); 
    tr.appendChild(td); 
    table.appendChild(tr); 
}); 

あなたの質問を読んで、Firebaseとウェブ開発の両方を同時に学びたいという印象を受けました。これは素晴らしいテクノロジーの強力な組み合わせで、素晴らしいアプリをいくつか構築できます。しかし、両方を同時に取ることは、あなたの質問に焦点がない傾向があることを意味します。あなたがFirebaseのパーツかHTMLパーツのどちらに悩まされているのかは不明です。

Firebase Codelab for webを利用してチャットアプリケーションを構築し、HTML断片をすでに提供していることを強くお勧めします。 Firebaseを使わずにWebチャットアプリを構築する。はい、退屈で、データのローカル配列を操作するだけです。しかし、より多くの焦点を当てた質問につながり、私たちがあなたを助けやすくなります。そして、あなたがウェブの側面を習得すれば、リアルタイムのデータの良さをFirebaseに追加することができます。