Realtime Database から データを取得する方法

firebaseのRealtime Databaseからデータを取得する方法は２種類

それぞれがどういう挙動をするのかまとめます

code: js

ref.on("child_added", (snapshot) => {

console.log(snapshot.val());

});

基本的に初期表示と登録後のコールバックはこのように表記します

公式のドキュメント

value

特定のデータベース パスにあるコンテンツの静的なスナップショットを、読み取りイベントのときに存在していたとおりに読み取るために使用します。これは、初期データで 1 回トリガーされます。さらに、データが変更されると、そのたびに再びトリガーされます。イベントのコールバックには、その場所にあるすべてのデータ（子のデータも含む）を含んでいるスナップショットが渡されます。上記のコード例で、value はアプリ内のすべてのブログ投稿を返しています。新しいブログ投稿が追加されるたびに、コールバック関数がすべての投稿を返します。

child_added

通常、データベースからアイテムのリストを取得するために使用します。その場所にあるコンテンツ全体を返す value とは異なり、child_added は既存の子ごとに 1 回トリガーされます。さらに、指定されたパスに新しい子が追加されると、そのたびに再びトリガーされます。イベント コールバックには、新しい子のデータを含んでいるスナップショットが渡されます。並べ替え目的のため、前の子のキーを含んでいる 2 番目の引数も渡されます。

valueは１回の通信で全てのデータを、child_addedは子ごとに取得って感じです

実際に取得してみます

今回は以下のデータを取得してきます

https://gyazo.com/10cd3ffd8e20244c143715bbb299ee14

code: js

ref.on("value", (snapshot) => {

console.log('value', snapshot.val());

});

ref.on("child_added", (snapshot) => {

console.log('child_add', snapshot.val());

});

https://gyazo.com/c4e14d36c1342e7ef217087e4fdcbebc

valueは一括、child_addedは子ごとに取得しているのがわかります

child_addedの場合、keyが渡って来ないように見えますが 、そんなことはないです

code: js

ref.on("child_added", (snapshot) => {

console.log('snapshot_key', snapshot.key);

console.log('child_add', snapshot.val());

});

https://gyazo.com/96dd3bc044b128b2aae7235869f3d6f3