Travailler avec des listes de données sur le Web

Obtenir une référence de base de données

Pour lire ou écrire des données à partir de la base de données, vous avez besoin d'une instance de firebase.database.Reference :

Web modular API

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web namespaced API

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

Listes de lecture et d'écriture

Ajouter à une liste de données

Utilisez la méthode push() pour ajouter des données à une liste dans les applications multi-utilisateurs. La méthode push() génère une clé unique chaque fois qu'un nouvel enfant est ajouté à la référence Firebase spécifiée. En utilisant ces clés générées automatiquement pour chaque nouvel élément de la liste, plusieurs clients peuvent ajouter des enfants au même emplacement en même temps sans conflits d'écriture. La clé unique générée par push() est basée sur un horodatage, donc les éléments de la liste sont automatiquement classés par ordre chronologique.

Vous pouvez utiliser la référence aux nouvelles données renvoyées par la méthode push() pour obtenir la valeur de la clé générée automatiquement par l'enfant ou définir les données pour l'enfant. La propriété .key d'une référence push() contient la clé générée automatiquement.

Vous pouvez utiliser ces clés générées automatiquement pour simplifier l'aplatissement de votre structure de données. Pour plus d’informations, consultez l’ exemple de répartition des données .

Par exemple, push() pourrait être utilisé pour ajouter une nouvelle publication à une liste de publications dans une application sociale :

Web modular API

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 namespaced API

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

Écoutez les événements pour enfants

Les événements enfants sont déclenchés en réponse à des opérations spécifiques qui arrivent aux enfants d'un nœud à partir d'une opération telle qu'un nouvel enfant ajouté via la méthode push() ou un enfant mis à jour via la méthode update() .

Événement Utilisation typique
child_added Récupérez des listes d’éléments ou écoutez les ajouts à une liste d’éléments. Cet événement est déclenché une fois pour chaque enfant existant, puis à nouveau chaque fois qu'un nouvel enfant est ajouté au chemin spécifié. L'auditeur reçoit un instantané contenant les données du nouvel enfant.
child_changed Écoutez les modifications apportées aux éléments d'une liste. Cet événement est déclenché à chaque fois qu'un nœud enfant est modifié. Cela inclut toutes les modifications apportées aux descendants du nœud enfant. L'instantané transmis à l'écouteur d'événements contient les données mises à jour pour l'enfant.
child_removed Écoutez les éléments supprimés d’une liste. Cet événement est déclenché lorsqu'un enfant immédiat est supprimé. L'instantané transmis au bloc de rappel contient les données de l'enfant supprimé.
child_moved Écoutez les changements dans l’ordre des éléments dans une liste ordonnée. Les événements child_moved suivent toujours l'événement child_changed qui a provoqué la modification de l'ordre de l'élément (en fonction de votre méthode de tri actuelle).

Chacun de ces éléments peut être utile pour écouter les modifications apportées à un nœud spécifique dans une base de données. Par exemple, une application de blog social peut utiliser ces méthodes ensemble pour surveiller l'activité dans les commentaires d'une publication, comme indiqué ci-dessous :

Web modular API

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 namespaced API

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

Écoutez les événements de valeur

Bien que l'écoute des événements enfants soit la méthode recommandée pour lire des listes de données, il existe des situations où l'écoute des événements de valeur sur une référence de liste s'avère utile.

Attacher un observateur value à une liste de données renverra la liste complète des données sous la forme d'un seul instantané sur lequel vous pourrez ensuite parcourir pour accéder à des enfants individuels.

Même lorsqu'il n'existe qu'une seule correspondance pour la requête, l'instantané reste une liste ; il ne contient qu'un seul élément. Pour accéder à l'élément, vous devez parcourir le résultat :

Web modular API

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 namespaced API

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

Ce modèle peut être utile lorsque vous souhaitez récupérer tous les enfants d'une liste en une seule opération, plutôt que d'écouter les événements supplémentaires ajoutés par les enfants.

Trier et filtrer les données

Vous pouvez utiliser la classe Realtime Database Query pour récupérer des données triées par clé, par valeur ou par valeur d'un enfant. Vous pouvez également filtrer le résultat trié sur un nombre spécifique de résultats ou une plage de clés ou de valeurs.

Trier les données

Pour récupérer des données triées, commencez par spécifier l'une des méthodes order-by pour déterminer comment les résultats sont classés :

Méthode Usage
orderByChild() Triez les résultats en fonction de la valeur d’une clé enfant spécifiée ou d’un chemin enfant imbriqué.
orderByKey() Trier les résultats par clés enfants.
orderByValue() Triez les résultats par valeurs enfants.

Vous ne pouvez utiliser qu’une seule méthode de tri à la fois. L’appel d’une méthode order-by plusieurs fois dans la même requête génère une erreur.

L'exemple suivant montre comment récupérer une liste des meilleures publications d'un utilisateur triées par nombre d'étoiles :

Web modular API

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 namespaced API

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

Ceci définit une requête qui, lorsqu'elle est combinée avec un écouteur enfant , synchronise le client avec les publications de l'utilisateur à partir du chemin dans la base de données en fonction de leur identifiant utilisateur, classés par le nombre d'étoiles que chaque publication a reçu. Cette technique d'utilisation des identifiants comme clés d'index est appelée répartition des données. Vous pouvez en savoir plus à ce sujet dans Structurez votre base de données .

L’appel à la méthode orderByChild() spécifie la clé enfant selon laquelle trier les résultats. Dans ce cas, les publications sont triées selon la valeur de leur enfant "starCount" respectif. Les requêtes peuvent également être classées par enfants imbriqués, au cas où vous disposez de données ressemblant à ceci :

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

Dans ce cas, nous pouvons trier les éléments de notre liste par valeurs imbriquées sous la clé de metrics en spécifiant le chemin relatif vers l'enfant imbriqué dans notre appel orderByChild() .

Web modular API

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 namespaced API

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

Pour plus d'informations sur la façon dont les autres types de données sont ordonnés, consultez Comment les données de requête sont ordonnées .

Filtrage des données

Pour filtrer les données, vous pouvez combiner n'importe quelle méthode de limite ou de plage avec une méthode de tri lors de la construction d'une requête.

Méthode Usage
limitToFirst() Définit le nombre maximum d'éléments à renvoyer à partir du début de la liste ordonnée des résultats.
limitToLast() Définit le nombre maximum d'éléments à renvoyer à partir de la fin de la liste ordonnée des résultats.
startAt() Renvoie les éléments supérieurs ou égaux à la clé ou à la valeur spécifiée, en fonction de la méthode de tri choisie.
startAfter() Renvoie les éléments supérieurs à la clé ou à la valeur spécifiée en fonction de la méthode de tri choisie.
endAt() Renvoie les éléments inférieurs ou égaux à la clé ou à la valeur spécifiée, en fonction de la méthode de tri choisie.
endBefore() Renvoie les éléments inférieurs à la clé ou à la valeur spécifiée en fonction de la méthode de tri choisie.
equalTo() Renvoie les éléments égaux à la clé ou à la valeur spécifiée, en fonction de la méthode de tri choisie.

Contrairement aux méthodes de tri, vous pouvez combiner plusieurs fonctions de limite ou de plage. Par exemple, vous pouvez combiner les méthodes startAt() et endAt() pour limiter les résultats à une plage de valeurs spécifiée.

Limiter le nombre de résultats

Vous pouvez utiliser les méthodes limitToFirst() et limitToLast() pour définir un nombre maximum d'enfants à synchroniser pour un événement donné. Par exemple, si vous utilisez limitToFirst() pour définir une limite de 100, vous ne recevrez initialement que 100 événements child_added . Si vous avez moins de 100 éléments stockés dans votre base de données Firebase, un événement child_added se déclenche pour chaque élément.

À mesure que les éléments changent, vous recevez des événements child_added pour les éléments qui entrent dans la requête et des événements child_removed pour les éléments qui en sortent, de sorte que le nombre total reste à 100.

L'exemple suivant montre comment un exemple d'application de blog définit une requête pour récupérer une liste des 100 publications les plus récentes de tous les utilisateurs :

Web modular API

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

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

Web namespaced API

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

Cet exemple définit uniquement une requête, pour synchroniser réellement les données, elle doit avoir un écouteur attaché.

Filtrer par clé ou valeur

Vous pouvez utiliser startAt() , startAfter() , endAt() , endBefore() et equalTo() pour choisir des points de début, de fin et d'équivalence arbitraires pour les requêtes. Cela peut être utile pour paginer des données ou rechercher des éléments avec des enfants qui ont une valeur spécifique.

Comment les données de requête sont ordonnées

Cette section explique comment les données sont triées par chacune des méthodes de tri de la classe Query .

orderByChild

Lors de l'utilisation orderByChild() , les données contenant la clé enfant spécifiée sont classées comme suit :

  1. Les enfants avec une valeur null pour la clé enfant spécifiée viennent en premier.
  2. Les enfants avec une valeur false pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont la valeur false , ils sont triés lexicographiquement par clé.
  3. Les enfants avec une valeur true pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont la valeur true , ils sont triés lexicographiquement par clé.
  4. Les enfants ayant une valeur numérique viennent ensuite, triés par ordre croissant. Si plusieurs enfants ont la même valeur numérique pour le nœud enfant spécifié, ils sont triés par clé.
  5. Les chaînes viennent après les nombres et sont triées lexicographiquement par ordre croissant. Si plusieurs enfants ont la même valeur pour le nœud enfant spécifié, ils sont classés lexicographiquement par clé.
  6. Les objets viennent en dernier et sont triés lexicographiquement par clé par ordre croissant.

orderByKey

Lorsque vous utilisez orderByKey() pour trier vos données, les données sont renvoyées par ordre croissant par clé.

  1. Les enfants possédant une clé pouvant être analysée comme un entier de 32 bits viennent en premier, triés par ordre croissant.
  2. Les enfants avec une valeur de chaîne comme clé viennent ensuite, triés lexicographiquement par ordre croissant.

orderByValue

Lors de l'utilisation orderByValue() , les enfants sont classés selon leur valeur. Les critères de classement sont les mêmes que dans orderByChild() , sauf que la valeur du nœud est utilisée à la place de la valeur d'une clé enfant spécifiée.

Détacher les auditeurs

Les rappels sont supprimés en appelant la méthode off() sur votre référence de base de données Firebase.

Vous pouvez supprimer un seul écouteur en le passant comme paramètre à off() . L'appel off() à l'emplacement sans argument supprime tous les écouteurs à cet emplacement.

L'appel off() sur un écouteur parent ne supprime pas automatiquement les écouteurs enregistrés sur ses nœuds enfants ; off() doit également être appelé sur tous les écouteurs enfants pour supprimer le rappel.

Prochaines étapes