web-dev-qa-db-ja.com

Firebase Databaseからデータを取得する方法は？

ユーザーから名前、携帯電話番号、電子メールアドレスを取得し、Firebase Realtime Databaseにデータを配置する簡単なプログラムを作成しようとしています。

3つの入力ボックスと、クリックすると上記の操作を行うボタンがあります。コードは次のとおりです。

<input type="text" id="name">
<input type="text" id="mobile">
<input type="text" id="email">

<button type="button" id="button" onclick="addLead()">Submit</button>

Firebaseを次のように設定しました。

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    ...
  };
  firebase.initializeApp(config);

  var database = firebase.database();
</script>

そして、これが私のaddLead()関数です：

function addLead() {
    var clientName = document.getElementById('name').value;
    var clientMobile = document.getElementById('mobile').value;
    var clientEmail = document.getElementById('email').value;

    var newClientKey = database.ref().child('leads').Push().key;
    database.ref('leads/'+newClientKey+'/name').set(clientName);
    database.ref('leads/'+newClientKey+'/mobile').set(clientMobile);
    database.ref('leads/'+newClientKey+'/email').set(clientEmail);
}

これは、動作するデータベースにデータを配置する方法です。

enter image description here

newClientKeyは何らかの文字列を生成しています。挿入時にうまく機能しますが、今はどのように取得するのですか？ 公式ドキュメント は役に立ちません。この生成された文字列はタイムスタンプに基づいている可能性があります。その場合、再度生成することは不可能です。

挿入時にしか使用できなかった一意に生成された文字列の下で、電子メール、モバイル、および名前へのアクセスを取得する方法を教えてください。

上記の構造では、必要なデータにアクセスするために2つのレベルを取得する必要があります。ドキュメントがないため、その方法がわかりません。このようなものが機能するかどうかはわかりません。

database.child().child();
javascriptfirebasefirebase-realtime-database
23
Chinmay Sarupria

この質問に対する答えは、Firebase Database Reference の奥深くに埋もれています。 forEach()は、子供の正確なパスを知らずに子供に到達するために使用されます。

var leadsRef = database.ref('leads');
leadsRef.on('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var childData = childSnapshot.val();
    });
});

childSnapshotに必要なデータが含まれるようになりました。child_addedを使用して同じものにアクセスすることもできます。

leadsRef.on('child_added', function(snapshot) {
      //Do something with the data
});

唯一の違いは、forEach()の場合、最初からループスルーするため、新しいデータが追加される場合、前のデータもロードしますが、child_addedの場合、リスナーは以前の既存の子ではなく、新しい子に対してのみ。

40
Chinmay Sarupria

ドット表記を使用して、探している子の値を取得することもできます。

以下では、最高評価の回答からforEachループをコメントアウトし、console.log（）を追加しました。

 var leadsRef = database.ref('leads');
  leadsRef.on('value', function(snapshot) {
      // snapshot.forEach(function(childSnapshot) {
        var childData = snapshot.node_.children_.root_.value.value_;
        console.log("snapshot.node_.children_.root_.value.value_: ", snapshot.node_.children_.root_.value.value_)
      // });
  });

これを投稿するとき、私はfirebase 5.9.1を使用しています

src = "https://www.gstatic.com/firebasejs/5.9.1/firebase.js"

1
Jortega