Mit Datenlisten im Web arbeiten

Datenbankreferenz abrufen

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

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web

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

Listen lesen und schreiben

Daten an eine Datenliste anhängen

Verwenden Sie die Methode push(), um einer Liste in Anwendungen für mehrere Nutzer Daten 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 demselben Speicherort gleichzeitig untergeordnete Elemente hinzufügen, ohne dass es zu Schreibkonflikten kommt. Der von push() generierte eindeutige Schlüssel basiert auf einem Zeitstempel. Daher werden Listenelemente automatisch chronologisch sortiert.

Sie können die Referenz 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 Property .key einer push()-Referenz enthält den automatisch generierten Schlüssel.

Mit diesen automatisch generierten Schlüsseln können Sie die Flattening-Datenstruktur vereinfachen. Weitere Informationen finden Sie im Beispiel für die Datenfan-out-Funktion.

Mit push() kann beispielsweise einer Liste von Beiträgen in einer Social-Media-Anwendung ein neuer Beitrag hinzugefügt werden:

Web

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

Web

// 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

Auf untergeordnete Ereignisse warten

Untergeordnete Ereignisse werden als Reaktion auf bestimmte Vorgänge ausgelöst, die bei den untergeordneten Elementen eines Knotens durch einen Vorgang auftreten, z. B. wenn ein neues untergeordnetes Element über die Methode push() hinzugefügt oder ein untergeordnetes Element über die Methode update() aktualisiert wird.

Ereignis Typische Verwendung
child_added Listen mit Elementen abrufen oder nach Elementen suchen, die einer Liste hinzugefügt wurden. Dieses Ereignis wird einmal für jedes vorhandene untergeordnete Element ausgelöst und dann jedes Mal, wenn dem angegebenen Pfad ein neues untergeordnetes Element hinzugefügt wird. Dem Listener wird ein Snapshot mit den Daten des neuen Kindes übergeben.
child_changed Auf Änderungen an den Elementen in einer Liste achten Dieses Ereignis wird jedes Mal ausgelöst, wenn ein untergeordneter Knoten geändert wird. Dazu gehören auch alle Änderungen an Nachkommen des untergeordneten Knotens. Der an den Ereignis-Listener übergebene Snapshot enthält die aktualisierten Daten für das untergeordnete Element.
child_removed Prüfen, ob Elemente aus einer Liste entfernt werden Dieses Ereignis wird ausgelöst, wenn ein unmittelbares untergeordnetes Element entfernt wird.Der an den Rückrufblock übergebene Snapshot enthält die Daten für das entfernte untergeordnete Element.
child_moved Beobachten von Änderungen an der Reihenfolge der Elemente in einer sortierten Liste child_moved-Ereignisse folgen immer dem child_changed-Ereignis, durch das sich die Reihenfolge des Artikels geändert hat (basierend auf Ihrer aktuellen Sortiermethode).

Zusammen können sie nützlich sein, um Änderungen an einem bestimmten Knoten in einer Datenbank zu überwachen. In einer Social-Blogging-App können diese Methoden beispielsweise kombiniert werden, um Aktivitäten in den Kommentaren eines Beitrags zu überwachen, wie unten dargestellt:

Web

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

Web

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

Auf Wertänderungen warten

Das Abhören von untergeordneten Ereignissen ist die empfohlene Methode zum Lesen von Datenlisten. Es gibt jedoch Situationen, in denen das Abhören von Wertereignissen für eine Listenreferenz nützlich ist.

Wenn Sie einer Datenliste einen value-Beobachter hinzufügen, wird die gesamte Datenliste als einzelner Snapshot zurückgegeben. Sie können dann eine Schleife über die Datenliste ausführen, um auf einzelne untergeordnete Elemente zuzugreifen.

Auch wenn es nur eine Übereinstimmung für die Suchanfrage gibt, ist der Snapshot immer eine Liste. Er enthält nur ein einzelnes Element. Um auf das Element zuzugreifen, musst du das Ergebnis durchlaufen:

Web

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

Web

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

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

Daten sortieren und filtern

Mit der Klasse Realtime Database Query können Sie Daten nach Schlüssel, Wert oder Wert eines untergeordneten Elements abrufen. Sie können die sortierten Ergebnisse auch auf eine bestimmte Anzahl von Ergebnissen oder einen Bereich von Schlüsseln oder Werten begrenzen.

Daten sortieren

Wenn Sie sortierte Daten abrufen möchten, müssen Sie zuerst eine der Sortierungsmethoden angeben, um zu bestimmen, wie die Ergebnisse sortiert werden:

Methode Nutzung
orderByChild() Ergebnisse nach dem Wert eines bestimmten untergeordneten Schlüssels oder eines verschachtelten untergeordneten Pfads sortieren.
orderByKey() Ergebnisse nach untergeordneten Schlüsseln sortieren
orderByValue() Ergebnisse nach untergeordneten Werten sortieren

Sie können jeweils nur eine Sortiermethode verwenden. Wenn Sie eine Methode zum Sortieren mehrmals in derselben Abfrage aufrufen, wird ein Fehler ausgegeben.

Im folgenden Beispiel wird gezeigt, wie du eine Liste der Top-Beiträge eines Nutzers abrufen kannst, sortiert nach der Anzahl der Sterne:

Web

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

Web

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

Dadurch wird eine Abfrage definiert, die in Kombination mit einem untergeordneten Listener den Client mit den Beiträgen des Nutzers aus dem Pfad in der Datenbank basierend auf seiner Nutzer-ID synchronisiert, sortiert nach der Anzahl der Sterne, die die einzelnen Beiträge erhalten haben. Diese Methode, IDs als Indexschlüssel zu verwenden, wird als Datenfan-out bezeichnet. Weitere Informationen finden Sie unter Datenbank strukturieren.

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 des jeweiligen untergeordneten "starCount"-Elements sortiert. Abfragen können auch nach verschachtelten untergeordneten Elementen sortiert werden, wenn Sie Daten wie diese haben:

"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 Schlüssel metrics verschachtelt sind, indem wir den relativen Pfad zum verschachtelten untergeordneten Element in unserem orderByChild()-Aufruf angeben.

Web

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

Web

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

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

Daten filtern

Wenn Sie Daten filtern möchten, können Sie beim Erstellen einer Abfrage eine beliebige der Methoden zum Begrenzen oder Eingrenzen mit einer Sortiermethode kombinieren.

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

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

Anzahl der Ergebnisse begrenzen

Mit den Methoden limitToFirst() und limitToLast() können Sie eine maximale Anzahl von untergeordneten Elementen festlegen, die für ein bestimmtes Ereignis synchronisiert werden sollen. Wenn Sie beispielsweise mit limitToFirst() ein Limit von 100 festlegen, erhalten Sie anfangs nur bis zu 100 child_added-Ereignisse. Wenn in Ihrer Firebase-Datenbank weniger als 100 Elemente gespeichert sind, wird für jedes Element ein child_added-Ereignis ausgelöst.

Wenn sich Artikel ändern, erhalten Sie child_added-Ereignisse für Artikel, die in die Abfrage aufgenommen werden, und child_removed-Ereignisse für Artikel, die nicht mehr Teil der Abfrage sind. Die Gesamtzahl bleibt also bei 100.

Im folgenden Beispiel wird gezeigt, wie in einer Beispiel-Blogging-App eine Abfrage definiert wird, um eine Liste der 100 aktuellsten Beiträge aller Nutzer abzurufen:

Web

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

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

Web

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

In diesem Beispiel wird nur eine Abfrage definiert. Für die tatsächliche Synchronisierung von Daten muss ein Listener angehängt sein.

Nach Schlüssel oder Wert filtern

Mit startAt(), startAfter(), endAt(), endBefore() und equalTo() können Sie beliebige Start-, End- und Äquivalenzpunkte für Abfragen auswählen. Das kann nützlich sein, um Daten zu paginarisieren oder Elemente mit untergeordneten Elementen mit einem bestimmten Wert zu finden.

Sortierung von Abfragedaten

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

orderByChild

Bei Verwendung von orderByChild() werden Daten, die den angegebenen untergeordneten Schlüssel enthalten, so sortiert:

  1. Untergeordnete Elemente mit einem null-Wert für den angegebenen untergeordneten Schlüssel werden zuerst angezeigt.
  2. Als Nächstes folgen untergeordnete Elemente mit dem Wert false für den angegebenen untergeordneten Schlüssel. Wenn mehrere untergeordnete Elemente den Wert false haben, werden sie lexikografisch nach Schlüssel sortiert.
  3. Als Nächstes folgen untergeordnete Elemente mit dem Wert true für den angegebenen untergeordneten Schlüssel. Wenn mehrere untergeordnete Elemente den Wert true haben, werden sie nach Schlüssel sortiert.
  4. Als Nächstes folgen untergeordnete Elemente mit einem numerischen Wert, sortiert in aufsteigender Reihenfolge. Wenn mehrere untergeordnete Elemente denselben numerischen Wert für den angegebenen untergeordneten Knoten haben, werden sie nach Schlüssel sortiert.
  5. Strings folgen nach Zahlen und werden alphabetisch in aufsteigender Reihenfolge sortiert. Wenn mehrere untergeordnete Elemente denselben Wert für den angegebenen untergeordneten Knoten haben, werden sie nach Schlüssel sortiert.
  6. Objekte werden als Letztes aufgeführt und in aufsteigender Reihenfolge nach Schlüssel sortiert.

orderByKey

Wenn Sie Ihre Daten mit orderByKey() sortieren, werden sie in aufsteigender Reihenfolge nach Schlüssel zurückgegeben.

  1. Untergeordnete Elemente mit einem Schlüssel, der als 32‑Bit-Ganzzahl geparst werden kann, werden zuerst in aufsteigender Reihenfolge sortiert.
  2. Als Nächstes folgen untergeordnete Elemente mit einem Stringwert als Schlüssel, sortiert in aufsteigender lexikografischer Reihenfolge.

orderByValue

Bei Verwendung von orderByValue() werden untergeordnete Elemente nach ihrem Wert sortiert. Die Sortierkriterien sind dieselben wie bei orderByChild(), mit der Ausnahme, dass der Wert des Knotens anstelle des Werts eines angegebenen untergeordneten Schlüssels verwendet wird.

Listener trennen

Callbacks werden entfernt, indem Sie die off()-Methode der Firebase-Datenbankreferenz aufrufen.

Sie können einen einzelnen Listener entfernen, indem Sie ihn als Parameter an off() übergeben. Wenn Sie off() für den Standort ohne Argumente aufrufen, werden alle Listener an diesem Standort entfernt.

Wenn off() auf einen übergeordneten Listener angewendet wird, werden die bei den untergeordneten Knoten registrierten Listener nicht automatisch entfernt. off() muss auch auf alle untergeordneten Listener angewendet werden, um den Rückruf zu entfernen.

Nächste Schritte