Check out what’s new from Firebase at Google I/O 2022. Learn more

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 version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

listes de lecture et d'écriture

Append à 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 touches générées automatiquement pour chaque nouvel élément dans la liste, plusieurs clients peuvent ajouter des enfants au même endroit 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 aplatir 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 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({
    // ...
});

Écoutez les événements 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 mise à update() méthode.

Événement utilisation typique
child_added Récupérer des listes d'éléments ou d'écouter des ajouts à la liste des articles. Cet événement est déclenché une fois pour chaque enfant existant, puis de nouveau à chaque fois qu'un nouvel enfant est ajouté au chemin d'accès spécifié. L'auditeur est passé un instantané contenant les données du nouvel enfant.
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 toutes les modifications aux descendants du nœud enfant. L'instantané est passé à l'écouteur d'événement contient les données mises à jour pour l'enfant.
child_removed Écoutez les articles étant retirés de la liste. Cet événement est déclenché lorsqu'un enfant immédiat est instantané passé enlevé.Dispositif au bloc de rappel contient les données pour l'enfant enlevé.
child_moved Écouter 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 ensemble peut être utile pour écouter des modifications à un noeud spécifique dans une base de données. Par exemple, une application de blogging sociale pourrait utiliser ces méthodes ainsi que pour surveiller l'activité dans les commentaires d'un poste, comme indiqué ci-dessous:

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

Écouter les événements de valeur

Tout en écoutant les événements de l'enfant est la méthode recommandée pour lire des listes de données, il y a des situations d'écoute pour les é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 quand il n'y a qu'une seule pour la requête, l'instantané est toujours une liste; il contient un seul élément. Pour accéder à l'article, vous devez faire une boucle sur le résultat:

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

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

Le tri et le filtrage des 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 à un nombre Sorted spécifique de résultats ou une gamme de clés ou des valeurs.

Trier les données

Pour récupérer les données triées, commencez en spécifiant un de l'ordre par des méthodes afin de déterminer comment les résultats sont triés:

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

Vous ne pouvez utiliser qu'un seul ordre par la méthode à la fois. Appeler un ordre par la méthode plusieurs fois dans la même requête renvoie une erreur.

L'exemple suivant montre comment vous pouvez récupérer une liste des meilleurs messages d'un utilisateur triés par nombre d'étoiles:

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

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 commandés par les enfants imbriqués, dans le cas où vous avez des données qui ressemble à 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 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');

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 des méthodes limites ou plage avec un ordre par la méthode lors de la construction d'une requête.

Méthode Usage
limitToFirst() Définit le nombre maximum d'éléments pour revenir dès le début de la liste ordonnée des résultats.
limitToLast() Définit le nombre maximum d'éléments pour revenir de la fin de la liste ordonnée des résultats.
startAt() éléments de retour supérieure ou égale à la clé spécifiée ou de la valeur, en fonction de l'ordre par la méthode choisie.
startAfter() Articles rendement supérieur à la clé spécifiée ou une valeur en fonction de l'ordre par la méthode choisie.
endAt() éléments de retour inférieure ou égale à la clé spécifiée ou de la valeur, en fonction de l'ordre par la méthode choisie.
endBefore() éléments de retour inférieurs à la clé spécifiée ou une valeur en fonction de l'ordre par la méthode choisie.
equalTo() éléments de retour égale à la clé spécifiée ou de la valeur, en fonction de l'ordre par la méthode choisie.

Contrairement à l'ordre par des méthodes, vous pouvez combiner plusieurs limites ou fonctions gamme. 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 par exemple l'application blogging définit une requête pour récupérer une liste des 100 plus les derniers messages de tous les utilisateurs:

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

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 les données ou paginant trouver des articles avec des enfants qui ont une valeur spécifique.

Comment les données de requête est commandé

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 ayant une valeur numérique viennent ensuite, triées par ordre croissant. Si plusieurs enfants ont la même valeur numérique pour le noeud enfant spécifié, ils sont classés par clé.
  5. Les chaînes viennent après les chiffres et sont classés lexicographique dans l'ordre croissant. Si plusieurs enfants ont la même valeur pour le noeud enfant spécifié, ils sont commandés lexicographique par clé.
  6. Les objets viennent en dernier et sont classés par ordre lexicographique 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é comme un entier de 32 bits viennent d'abord, classés par ordre croissant.
  2. Les enfants ayant une valeur de chaîne comme clé viennent ensuite, triées lexicographique dans l'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étachez 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 off() sur l'emplacement sans argument supprime tous les auditeurs à cet endroit.

Appel 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