Cette page a été traduite par l'API Cloud Translation.

Utiliser 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

import { getDatabase } from "firebase/database";

const database = getDatabase();rtdb_get_reference.js

Web

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

Lire et écrire des listes

Ajouter à une liste de données

Utilisez la méthode push() pour ajouter des données à une liste dans des 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 conflit d'écriture. La clé unique générée par push() est basée sur un code temporel. Les éléments de liste sont donc automatiquement triés chronologiquement.

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 de l'enfant ou définir des 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 en savoir plus, consultez l'exemple de fan-out de données.

Par exemple, push() peut être utilisé pour ajouter un post à une liste de posts dans une application de réseau social:

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

Écouter les événements enfants

Les événements enfants sont déclenchés en réponse à des opérations spécifiques qui affectent les enfants d'un nœud à partir d'une opération, comme l'ajout d'un enfant via la méthode push() ou la mise à jour d'un enfant via la méthode update().

Événement	Utilisation type
`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 à chaque fois qu'un nouvel enfant est ajouté au chemin d'accès spécifié. Un instantané contenant les données du nouvel enfant est transmis à l'écouteur.
`child_changed`	Écouter 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 toute modification apportée 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 se déclenche 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 modifications apportées à l'ordre des éléments dans une liste ordonnée. Les événements `child_moved` suivent toujours l'événement `child_changed` ayant entraîné 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 bloggage sur les réseaux sociaux peut utiliser ces méthodes ensemble pour surveiller l'activité dans les commentaires d'un post, comme indiqué ci-dessous:

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

Écouter 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 est utile.

Associer un observateur value à une liste de données renvoie la liste complète de données sous la forme d'un seul instantané que vous pouvez ensuite parcourir pour accéder à des enfants individuels.

Même s'il n'y a qu'une seule correspondance pour la requête, l'instantané reste une liste, mais ne contient qu'un seul élément. Pour accéder à l'élément, vous devez effectuer une boucle sur le résultat:

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

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

Trier et filtrer des données

Vous pouvez utiliser la classe Query Realtime Database pour récupérer des données triées par clé, par valeur ou par valeur d'un enfant. Vous pouvez également filtrer les résultats triés en fonction d'un nombre spécifique de résultats, d'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 de tri pour déterminer l'ordre des résultats:

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

Vous ne pouvez utiliser qu'une méthode de tri à la fois. Appeler une méthode de tri plusieurs fois dans la même requête génère une erreur.

L'exemple suivant montre comment récupérer la liste des meilleurs posts d'un utilisateur, triés par nombre d'étoiles:

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

Cela définit une requête qui, combinée à un écouteur enfant, synchronise le client avec les posts de l'utilisateur à partir du chemin d'accès dans la base de données en fonction de son ID utilisateur, triés par nombre d'étoiles reçues par chaque post. Cette technique d'utilisation des ID comme clés d'index s'appelle "fan-out" des données. Pour en savoir plus, consultez Structurer votre base de données.

L'appel de la méthode orderByChild() spécifie la clé enfant à utiliser pour trier les résultats. Dans ce cas, les posts sont triés en fonction de la valeur de leur enfant "starCount" respectif. Les requêtes peuvent également être triées par enfants imbriqués, si vos données se présentent comme suit:

"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 nos éléments de liste par valeurs imbriquées sous la clé metrics en spécifiant le chemin relatif vers l'enfant imbriqué dans notre appel orderByChild().

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

Pour en savoir plus sur l'ordre des autres types de données, consultez la section Ordre des données de requête.

Filtrer les données

Pour filtrer les données, vous pouvez combiner l'une des méthodes de limite ou de plage avec une méthode de tri lors de la création d'une requête.

Méthode	Utilisation
`limitToFirst()`	Définit le nombre maximal d'éléments à renvoyer à partir du début de la liste de résultats triée.
`limitToLast()`	Définit le nombre maximal d'éléments à renvoyer à partir de la fin de la liste de résultats triée.
`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 maximal d'enfants à synchroniser pour un événement donné. Par exemple, si vous utilisez limitToFirst() pour définir une limite de 100, vous ne recevez initialement que 100 événements child_added. Si vous stockez moins de 100 éléments 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 une application de bloggage définit une requête pour récupérer la liste des 100 posts les plus récents de tous les utilisateurs:

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

Cet exemple ne définit qu'une requête. Pour synchroniser réellement les données, il doit disposer d'un écouteur associé.

Filtrer par clé ou valeur

Vous pouvez utiliser startAt(), startAfter(), endAt(), endBefore() et equalTo() pour choisir des points de départ, 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 ayant une valeur spécifique.

Ordre des données de requête

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

`orderByChild`

Lorsque vous utilisez orderByChild(), les données contenant la clé enfant spécifiée sont triées comme suit:

Les enfants dont la valeur de la clé enfant spécifiée est null sont affichés en premier.
Les enfants dont la valeur est false pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont une valeur de false, ils sont triés lexicographiquement par clé.
Les enfants dont la valeur est true pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont une valeur de true, ils sont triés par clé de façon lexicographique.
Les enfants associés à 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é.
Les chaînes viennent après les nombres et sont triées par ordre lexicographique croissant. Si plusieurs enfants ont la même valeur pour le nœud enfant spécifié, ils sont triés par clé de manière lexicographique.
Les objets sont placés en dernier et sont triés par ordre croissant, de manière lexicographique, par clé.

`orderByKey`

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

Les enfants dont la clé peut être analysée en tant qu'entier 32 bits sont affichés en premier, triés par ordre croissant.
Les enfants dont la clé est une valeur de chaîne viennent ensuite, triés par ordre lexicographique croissant.

`orderByValue`

Lorsque vous utilisez orderByValue(), les enfants sont triés en fonction de leur valeur. Les critères de tri 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.

Dissocier les écouteurs

Pour supprimer les rappels, appelez la méthode off() sur votre référence de base de données Firebase.

Vous pouvez supprimer un seul écouteur en le transmettant en tant que paramètre à off(). Appeler off() sur l'emplacement sans arguments supprime tous les écouteurs à cet emplacement.

L'appel de 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.