Arbeiten Sie mit Datenlisten im Web

Holen Sie sich eine Datenbankreferenz

Um Daten aus der Datenbank zu lesen oder zu schreiben, benötigen Sie eine Instanz von firebase.database.Reference :

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Listen lesen und schreiben

An eine Datenliste anhängen

Verwenden Sie die Methode push() , um Daten in Mehrbenutzeranwendungen an eine Liste anzuhängen. Die Methode push() generiert jedes Mal einen eindeutigen Schlüssel, wenn der angegebenen Firebase-Referenz ein neues untergeordnetes Element hinzugefügt wird. Durch die Verwendung dieser automatisch generierten Schlüssel für jedes neue Element in der Liste können mehrere Clients gleichzeitig Kinder an derselben Stelle hinzufügen, ohne dass es zu Schreibkonflikten kommt. Der von push() generierte eindeutige Schlüssel basiert auf einem Zeitstempel, sodass Listenelemente automatisch chronologisch geordnet werden.

Sie können den Verweis auf die neuen Daten verwenden, die von der push() Methode zurückgegeben werden, um den Wert des automatisch generierten Schlüssels des untergeordneten Elements abzurufen oder Daten für das untergeordnete Element festzulegen. Die Eigenschaft .key einer push() Referenz enthält den automatisch generierten Schlüssel.

Sie können diese automatisch generierten Schlüssel verwenden, um das Vereinfachen Ihrer Datenstruktur zu vereinfachen. Weitere Informationen finden Sie im Datenauffächerungsbeispiel .

Beispielsweise könnte push() verwendet werden, um einen neuen Beitrag zu einer Liste von Beiträgen in einer sozialen Anwendung hinzuzufügen:

Web version 9

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, {
    // ...
});

Web version 8

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

Achten Sie auf untergeordnete Ereignisse

Untergeordnete Ereignisse werden als Reaktion auf bestimmte Operationen ausgelöst, die mit den untergeordneten Knoten eines Knotens von einer Operation ausgeführt werden, wie z. B. ein neues untergeordnetes Element, das durch die push() Methode hinzugefügt wird, oder ein untergeordnetes Element, das durch die update() Methode aktualisiert wird.

Vorfall Typische Verwendung
child_added Rufen Sie Listen von Elementen ab oder hören Sie auf Ergänzungen zu einer Liste von Elementen. Dieses Ereignis wird einmal für jedes vorhandene untergeordnete Element ausgelöst und dann erneut jedes Mal, wenn dem angegebenen Pfad ein neues untergeordnetes Element hinzugefügt wird. Dem Zuhörer wird ein Snapshot mit den Daten des neuen Kindes übergeben.
child_changed Überwachen Sie Änderungen an den Elementen in einer Liste. Dieses Ereignis wird jedes Mal ausgelöst, wenn ein untergeordneter Knoten geändert wird. Dies schließt alle Änderungen an Nachkommen des untergeordneten Knotens ein. Der an den Ereignis-Listener übergebene Snapshot enthält die aktualisierten Daten für das untergeordnete Element.
child_removed Listen Sie auf Elemente, die aus einer Liste entfernt werden. Dieses Ereignis wird ausgelöst, wenn ein unmittelbar untergeordnetes Element entfernt wird. Der an den Callback-Block übergebene Snapshot enthält die Daten für das entfernte untergeordnete Element.
child_moved Überwachen Sie Änderungen an der Reihenfolge der Elemente in einer geordneten Liste. child_moved Ereignisse folgen immer auf das child_changed Ereignis, das die Änderung der Artikelreihenfolge verursacht hat (basierend auf Ihrer aktuellen Sortiermethode).

Alle zusammen können nützlich sein, um Änderungen an einem bestimmten Knoten in einer Datenbank abzuhören. Beispielsweise könnte eine Social-Blogging-App diese Methoden zusammen verwenden, um die Aktivität in den Kommentaren eines Beitrags zu überwachen, wie unten gezeigt:

Web version 9

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);
});

Web version 8

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);
});

Achten Sie auf Wertereignisse

Während das Abhören von untergeordneten Ereignissen die empfohlene Methode zum Lesen von Datenlisten ist, gibt es Situationen, in denen das Abhören von Wertereignissen in einer Listenreferenz nützlich ist.

Wenn Sie einen value an eine Datenliste anhängen, wird die gesamte Datenliste als einzelne Momentaufnahme zurückgegeben, die Sie dann durchlaufen können, um auf einzelne untergeordnete Elemente zuzugreifen.

Selbst wenn es nur eine einzige Übereinstimmung für die Abfrage gibt, ist der Schnappschuss immer noch eine Liste; es enthält nur ein einzelnes Element. Um auf das Element zuzugreifen, müssen Sie das Ergebnis durchlaufen:

Web version 9

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
});

Web version 8

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

Dieses Muster kann nützlich sein, wenn Sie alle untergeordneten Elemente einer Liste in einem einzigen Vorgang abrufen möchten, anstatt auf zusätzliche untergeordnete Ereignisse zu warten.

Daten sortieren und filtern

Sie können die Realtime Database Query -Klasse verwenden, um Daten abzurufen, die nach Schlüssel, nach Wert oder nach Wert eines untergeordneten Elements sortiert sind. Sie können das sortierte Ergebnis auch nach einer bestimmten Anzahl von Ergebnissen oder einem Bereich von Schlüsseln oder Werten filtern.

Daten sortieren

Um sortierte Daten abzurufen, geben Sie zunächst eine der Sortiermethoden an, um zu bestimmen, wie die Ergebnisse sortiert werden:

Methode Verwendungszweck
orderByChild() Sortieren Sie die Ergebnisse nach dem Wert eines angegebenen untergeordneten Schlüssels oder verschachtelten untergeordneten Pfads.
orderByKey() Sortieren Sie die Ergebnisse nach untergeordneten Schlüsseln.
orderByValue() Sortieren Sie die Ergebnisse nach untergeordneten Werten.

Sie können jeweils nur eine Order-by-Methode verwenden. Das mehrmalige Aufrufen einer Order-By-Methode in derselben Abfrage löst einen Fehler aus.

Das folgende Beispiel zeigt, wie Sie eine Liste der Top-Beiträge eines Benutzers abrufen können, sortiert nach der Anzahl der Sterne:

Web version 9

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'));

Web version 8

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

Dies definiert eine Abfrage, die in Kombination mit einem untergeordneten Listener den Client mit den Posts des Benutzers aus dem Pfad in der Datenbank basierend auf seiner Benutzer-ID synchronisiert, sortiert nach der Anzahl der Sterne, die jeder Post erhalten hat. Diese Technik der Verwendung von IDs als Indexschlüssel wird als Datenauffächerung bezeichnet. Sie können mehr darüber in Structure Your Database lesen.

Der Aufruf der Methode orderByChild() gibt den untergeordneten Schlüssel an, nach dem die Ergebnisse sortiert werden sollen. In diesem Fall werden Beiträge nach dem Wert ihres jeweiligen "starCount" sortiert. Abfragen können auch nach verschachtelten untergeordneten Elementen geordnet werden, falls Sie Daten haben, die wie folgt aussehen:

"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",
  }
},

In diesem Fall können wir unsere Listenelemente nach Werten sortieren, die unter dem metrics verschachtelt sind, indem wir den relativen Pfad zum verschachtelten untergeordneten Element in unserem Aufruf orderByChild() .

Web version 9

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

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

Web version 8

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

Weitere Informationen zur Sortierung anderer Datentypen finden Sie unter Sortierung von Abfragedaten .

Filtern von Daten

Um Daten zu filtern, können Sie beim Erstellen einer Abfrage jede der Limit- oder Range-Methoden mit einer Order-By-Methode kombinieren.

Methode Verwendungszweck
limitToFirst() Legt die maximale Anzahl von Elementen fest, die vom Anfang der geordneten Ergebnisliste zurückgegeben werden.
limitToLast() Legt die maximale Anzahl von Elementen fest, die vom Ende der geordneten Ergebnisliste zurückgegeben werden.
startAt() Gibt je nach gewählter Sortiermethode Elemente zurück, die größer oder gleich dem angegebenen Schlüssel oder Wert sind.
startAfter() Gibt je nach gewählter Sortiermethode Elemente zurück, die größer als der angegebene Schlüssel oder Wert sind.
endAt() Gibt je nach gewählter Sortiermethode Elemente zurück, die kleiner oder gleich dem angegebenen Schlüssel oder Wert sind.
endBefore() Gibt je nach gewählter Sortiermethode Elemente zurück, die kleiner als der angegebene Schlüssel oder Wert sind.
equalTo() Gibt je nach gewählter Sortiermethode Elemente zurück, die dem angegebenen Schlüssel oder Wert entsprechen.

Im Gegensatz zu den Order-by-Methoden können Sie mehrere Limit- oder Bereichsfunktionen kombinieren. Beispielsweise können Sie die Methoden startAt() und endAt() kombinieren, um die Ergebnisse auf einen bestimmten Wertebereich zu beschränken.

Begrenzen Sie die Anzahl der Ergebnisse

Sie können die Methoden limitToFirst() und limitToLast() verwenden, um eine maximale Anzahl untergeordneter Elemente festzulegen, die für ein bestimmtes Ereignis synchronisiert werden sollen. Wenn Sie beispielsweise mit limitToFirst() ein Limit von 100 festlegen, erhalten Sie zunächst nur bis zu 100 child_added Ereignisse. Wenn Sie weniger als 100 Elemente in Ihrer Firebase-Datenbank gespeichert haben, wird für jedes Element ein child_added Ereignis ausgelöst.

Wenn sich Elemente ändern, erhalten Sie child_added Ereignisse für Elemente, die in die Abfrage aufgenommen werden, und child_removed Ereignisse für Elemente, die daraus herausfallen, sodass die Gesamtzahl bei 100 bleibt.

Das folgende Beispiel zeigt, wie die Beispiel-Blogging-App eine Abfrage definiert, um eine Liste der 100 neuesten Posts aller Benutzer abzurufen:

Web version 9

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

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

Web version 8

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

Dieses Beispiel definiert nur eine Abfrage, um Daten tatsächlich zu synchronisieren, muss sie einen angehängten Listener haben.

Filtern Sie nach Schlüssel oder Wert

Sie können startAt() , startAfter() , endAt() , endBefore() und equalTo() , um beliebige Start-, End- und Äquivalenzpunkte für Abfragen auszuwählen. Dies kann nützlich sein, um Daten zu paginieren oder Elemente mit untergeordneten Elementen zu finden, die einen bestimmten Wert haben.

Wie Abfragedaten geordnet werden

In diesem Abschnitt wird erläutert, wie Daten von den einzelnen Sortiermethoden in der Query -Klasse sortiert werden.

orderByChild

Bei der Verwendung von orderByChild() werden Daten, die den angegebenen untergeordneten Schlüssel enthalten, wie folgt geordnet:

  1. Kinder mit einem null für den angegebenen untergeordneten Schlüssel kommen zuerst.
  2. Als nächstes kommen Kinder mit dem Wert false für den angegebenen untergeordneten Schlüssel. Wenn mehrere Kinder den Wert false haben, werden sie lexikografisch nach Schlüssel sortiert.
  3. Als nächstes kommen Kinder mit dem Wert true für den angegebenen untergeordneten Schlüssel. Wenn mehrere Kinder den Wert true haben, werden sie lexikografisch nach Schlüssel sortiert.
  4. Kinder mit einem numerischen Wert kommen als nächstes, in aufsteigender Reihenfolge sortiert. Wenn mehrere untergeordnete Knoten denselben numerischen Wert für den angegebenen untergeordneten Knoten haben, werden sie nach Schlüssel sortiert.
  5. Zeichenfolgen kommen nach Zahlen und werden lexikographisch in aufsteigender Reihenfolge sortiert. Wenn mehrere untergeordnete Knoten denselben Wert für den angegebenen untergeordneten Knoten haben, werden sie lexikografisch nach Schlüssel geordnet.
  6. Die Objekte kommen zuletzt und werden lexikografisch nach Schlüsseln in aufsteigender Reihenfolge sortiert.

orderByKey

Wenn orderByKey() zum Sortieren Ihrer Daten verwenden, werden die Daten in aufsteigender Reihenfolge nach Schlüssel zurückgegeben.

  1. Kinder mit einem Schlüssel, der als 32-Bit-Ganzzahl geparst werden kann, kommen zuerst, sortiert in aufsteigender Reihenfolge.
  2. Kinder mit einem Zeichenfolgenwert als Schlüssel kommen als nächstes, lexikografisch in aufsteigender Reihenfolge sortiert.

orderByValue

Bei der Verwendung von orderByValue() werden Kinder nach ihrem Wert geordnet. Die Sortierkriterien sind dieselben wie in orderByChild() , außer dass der Wert des Knotens anstelle des Werts eines angegebenen untergeordneten Schlüssels verwendet wird.

Zuhörer trennen

Rückrufe werden entfernt, indem die Methode off() für Ihre Firebase-Datenbankreferenz aufgerufen wird.

Sie können einen einzelnen Listener entfernen, indem Sie ihn als Parameter an off() übergeben. Das Aufrufen off() an der Position ohne Argumente entfernt alle Listener an dieser Position.

Das Aufrufen off() auf einem übergeordneten Listener entfernt nicht automatisch Listener, die auf seinen untergeordneten Knoten registriert sind; off() muss auch für alle untergeordneten Listener aufgerufen werden, um den Rückruf zu entfernen.

Nächste Schritte