Travailler avec des listes de données sur le Web

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

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

Web v8

var database = firebase.database();

Web v9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Lire et rédiger des listes

Ajouter à une liste de données

Utilisez le push() méthode pour ajouter des données à une liste dans les applications multi - utilisateur. La push() méthode 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é par push() est basée sur un horodatage, de sorte que 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 le push() méthode pour obtenir la valeur de la clé de l' enfant ou généré automatiquement les données du jeu pour l'enfant. La .key propriété d'un push() référence 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, voir le fan-out des données par exemple .

Par exemple, push() pourrait être utilisé pour ajouter un nouveau message à une liste de messages dans une application sociale:

Web v8

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

Web v9

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

Écoutez les événements pour enfants

Événements enfants sont déclenchées en réponse à des opérations spécifiques qui se produisent aux enfants d'un noeud d'une opération comme un nouvel enfant ajouté par la push() méthode ou un enfant mis à jour par la update() à update() méthode.

É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énement 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 modifications apportées à l'ordre des éléments dans une liste ordonnée. child_moved événements suivent toujours le child_changed événement qui a causé l'ordre de changement ( en fonction de votre commande par méthode actuelle) de l'élément.

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 blogs sociaux peut utiliser ces méthodes ensemble pour surveiller l'activité dans les commentaires d'une publication, comme indiqué ci-dessous :

Web v8

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

Web v9

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

É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 d'événements de valeur sur une référence de liste est utile.

Fixation d' une value observateur à une liste de données retourne la liste complète des données comme un instantané unique que vous pouvez ensuite une boucle sur l'accès individuel des enfants.

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

Web v8

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

Web v9

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

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 aux enfants.

Trier et filtrer les données

Vous pouvez utiliser la base de données en temps réel de Query de classe pour récupérer des données triées par clé, en valeur, ou valeur d'un enfant. Vous pouvez également filtrer le résultat trié en fonction d'un nombre spécifique de résultats ou 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 comment les résultats sont classés :

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

Vous ne pouvez utiliser qu'un seul ordre par la méthode à la fois. L'appel d'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 une liste des meilleurs messages d'un utilisateur triés par nombre d'étoiles :

Web v8

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

Web v9

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

Ceci définit une requête qui lorsqu'il est combiné avec un écouteur d'enfant synchronise le client avec les messages de l'utilisateur du chemin dans la base de données en fonction de leur ID utilisateur, commandé par le nombre d'étoiles chaque poste a reçu. Cette technique d'utiliser des ID comme clés d'index est appelé ventilateur de données, vous pouvez en lire davantage dans la structure de votre base de données .

L'appel à la orderByChild() méthode spécifie la clé de l' enfant à l' ordre par les résultats. Dans ce cas, les messages sont classés par la valeur de leur respective "starCount" enfant. Les requêtes peuvent également être classées par enfants imbriqués, au cas où vous auriez des données qui ressemblent à 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 commander nos éléments de la liste par des valeurs imbriquées sous la metrics clé en spécifiant le chemin par rapport à l'enfant imbriqué dans notre orderByChild() appel.

Web v8

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

Web v9

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

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

Pour plus d' informations sur d' autres types de données sont ordonnées, voir comment la requête des données est ordonnée .

Filtrage des 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 construction d'une requête.

Méthode Usage
limitToFirst() Définit le nombre maximal d'éléments à renvoyer à partir du début de la liste ordonnée des résultats.
limitToLast() Définit le nombre maximal 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, selon 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, selon 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 des éléments égaux à la clé ou à la valeur spécifiée, selon 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 startAt() et endAt() méthodes pour limiter les résultats à une plage de valeurs.

Limiter le nombre de résultats

Vous pouvez utiliser le limitToFirst() et limitToLast() méthodes pour définir un nombre maximum d'enfants à être synchronisés pour un événement donné. Par exemple, si vous utilisez limitToFirst() pour définir une limite de 100, vous recevez d' abord que jusqu'à 100 child_added événements. Si vous avez moins de 100 éléments stockés dans la base de données Firebase, un child_added événement se déclenche pour chaque élément.

Comme éléments changent, vous recevez child_added événements pour les éléments qui entrent dans la requête et child_removed événements pour les éléments qui abandonnent pour que le nombre total de séjours à 100.

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

Web v8

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

Web v9

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

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

Cet exemple définit uniquement une requête, pour synchroniser de données , il a besoin d'avoir un attaché auditeur .

Filtrer par clé ou valeur

Vous pouvez utiliser startAt() , startAfter() , endAt() , endBefore() , et equalTo() choisir départ arbitraire, la fin et les points d'équivalence 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 chacun de l'ordre par des méthodes dans la Query classe.

orderByChild

Lors de l' utilisation orderByChild() , les données qui contient la clé de l' enfant spécifié est ordonné comme suit:

  1. Les enfants ayant une null valeur de la clé de l' enfant spécifié viennent en premier.
  2. Les enfants ayant une valeur de false pour la clé de l' enfant spécifié viennent ensuite. Si plusieurs enfants ont une valeur de false , ils sont triés lexicographique par clé.
  3. Les enfants ayant une valeur de true pour la clé de l' enfant spécifié viennent ensuite. Si plusieurs enfants ont une valeur de true , ils sont classés par ordre lexicographique clé.
  4. Les enfants avec 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 arrivent en dernier et sont triés lexicographiquement par clé dans l'ordre croissant.

orderByKey

Lors de l' utilisation orderByKey() pour trier vos données, les données sont renvoyées en ordre croissant par clé.

  1. Les enfants avec une clé qui peut ê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

Lorsque vous utilisez orderByValue() , les enfants sont classés par leur valeur. Les critères de classement sont les mêmes que dans orderByChild() , à l' exception de la valeur du nœud est utilisé au lieu de la valeur d'une clé enfant spécifié.

Détacher les auditeurs

Callbacks sont retirés en appelant le off() méthode sur la référence de votre base de données Firebase.

Vous pouvez supprimer un seul auditeur en le faisant passer comme paramètre à off() . Appel au off() sur l'emplacement sans argument supprime tous les auditeurs à cet endroit.

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

Prochaines étapes