使用 Web 上的數據列表

獲取數據庫參考

要從數據庫讀取或寫入數據，您需要一個firebase.database.Reference實例：

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

var database = firebase.database();
index.js

閱讀和寫作列表

追加到數據列表

使用push()方法將數據追加到多用戶應用程序中的列表中。每次將新子項添加到指定的 Firebase 引用時push()方法都會生成一個唯一的密鑰。通過為列表中的每個新元素使用這些自動生成的鍵，多個客戶端可以同時將子元素添加到同一位置，而不會發生寫入衝突。 push()生成的唯一鍵基於時間戳，因此列表項會自動按時間順序排序。

您可以使用對push()方法返回的新數據的引用來獲取子項自動生成的鍵的值或為子項設置數據。 push()引用的.key屬性包含自動生成的密鑰。

您可以使用這些自動生成的鍵來簡化數據結構的扁平化。有關更多信息，請參閱數據扇出示例。

例如， push()可用於將新帖子添加到社交應用程序中的帖子列表中：

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});
rtdb_social_push.js

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});
lists-of-data.js

監聽子事件

子事件是為了響應節點子節點發生的特定操作而觸發的，這些操作例如通過push()方法添加新子節點或通過update()方法更新子節點。

這些中的每一個都可以用於偵聽數據庫中特定節點的更改。例如，社交博客應用程序可能會同時使用這些方法來監視帖子評論中的活動，如下所示：

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});
rtdb_social_listen_children.js

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});
lists-of-data.js

監聽值事件

雖然偵聽子事件是讀取數據列表的推薦方法，但在某些情況下偵聽列表引用上的值事件很有用。

將value觀察器附加到數據列表會將整個數據列表作為單個快照返回，然後您可以循環訪問各個子項。

即使查詢只有一個匹配項，快照仍然是一個列表；它只包含一個項目。要訪問該項目，您需要循環結果：

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});
rtdb_social_listen_value.js

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});
lists-of-data.js

當您想要在單個操作中獲取列表的所有子項而不是偵聽其他子項添加事件時，此模式非常有用。

排序和過濾數據

您可以使用實時數據庫Query類來檢索按鍵、按值或按子值排序的數據。您還可以將排序結果過濾為特定數量的結果或一系列鍵或值。

對數據進行排序

要檢索排序的數據，請首先指定排序方法之一來確定結果的排序方式：

您一次只能使用一種排序方式。在同一查詢中多次調用 order-by 方法會引發錯誤。

以下示例演示瞭如何檢索按星數排序的用戶熱門帖子列表：

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));
rtdb_social_most_starred.js

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');
lists-of-data.js

這定義了一個查詢，當與子偵聽器結合使用時，該查詢將根據用戶 ID 將客戶端與數據庫中路徑中的用戶帖子同步，並按每個帖子收到的星數排序。這種使用 ID 作為索引鍵的技術稱為數據扇出，您可以在構建數據庫中閱讀更多相關信息。

對orderByChild()方法的調用指定用於對結果進行排序的子鍵。在這種情況下，帖子按其各自的"starCount"子項的值排序。如果您的數據如下所示，還可以按嵌套子項對查詢進行排序：

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

在這種情況下，我們可以通過在orderByChild()調用中指定嵌套子項的相對路徑，按嵌套在metrics鍵下的值對列表元素進行排序。

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));
rtdb_social_most_viewed.js

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');
lists-of-data.js

有關其他數據類型如何排序的詳細信息，請參閱查詢數據如何排序。

過濾數據

要過濾數據，您可以在構造查詢時將任何限製或範圍方法與排序方法結合起來。

與排序方法不同，您可以組合多個限製或範圍函數。例如，您可以組合startAt()和endAt()方法將結果限制為指定的值範圍。

限制結果數量

您可以使用limitToFirst()和limitToLast()方法來設置給定事件要同步的子級的最大數量。例如，如果您使用limitToFirst()將限制設置為 100，則最初最多只會收到 100 個child_added事件。如果您的 Firebase 數據庫中存儲的項目少於 100 個，則每個項目都會觸​​發child_added事件。

當項目發生更改時，您會收到進入查詢的項目的child_added事件和退出查詢的項目的child_removed事件，以便總數保持在 100。

以下示例演示了示例博客應用程序如何定義一個查詢來檢索所有用戶最近發表的 100 篇帖子的列表：

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));
rtdb_social_recent.js

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);
lists-of-data.js

此示例僅定義了一個查詢，要實際同步數據，它需要附加一個偵聽器。

按鍵或值過濾

您可以使用startAt() 、 startAfter() 、 endAt() 、 endBefore()和equalTo()來選擇查詢的任意起始點、結束點和等價點。這對於對數據進行分頁或查找具有特定值的子項目非常有用。

查詢數據如何排序

本節說明如何通過Query類中的每個 order-by 方法對數據進行排序。

orderByChild

使用orderByChild()時，包含指定子鍵的數據按如下方式排序：

1. 指定子鍵的值為null子項排在第一位。
2. 接下來是指定子鍵值為false的子項。如果多個子項的值為false ，則它們按鍵按字典順序排序。
3. 接下來是指定子鍵值為true的子項。如果多個子項的值為true ，則它們按鍵按字典順序排序。
4. 接下來是具有數值的子項，按升序排序。如果指定子節點的多個子節點具有相同的數值，則它們按鍵排序。
5. 字符串位於數字之後，並按字典順序升序排序。如果指定子節點的多個子節點具有相同的值，則它們按鍵按字典順序排序。
6. 對象排在最後，並按字典順序按鍵升序排序。

orderByKey

當使用orderByKey()對數據進行排序時，數據將按鍵升序返回。

1. 具有可解析為 32 位整數的鍵的子項排在前面，按升序排序。
2. 接下來是以字符串值作為鍵的子項，按字典順序升序排列。

orderByValue

使用orderByValue()時，子項按其值排序。排序標準與orderByChild()中的相同，只是使用節點的值而不是指定子鍵的值。

分離監聽器

通過調用 Firebase 數據庫引用上的off()方法來刪除回調。

您可以通過將單個監聽器作為參數傳遞給off()來刪除它。在不帶參數的位置調用off()會刪除該位置的所有偵聽器。

在父監聽器上調用off()不會自動刪除在其子節點上註冊的監聽器；還必須在任何子偵聽器上調用off()以刪除回調。

下一步

• 了解如何構建數據
• 離線存儲數據