Lavorare con elenchi di dati sul Web

Ottieni un riferimento al database

Per leggere o scrivere dati dal database, è necessaria un'istanza di firebase.database.Reference :

Web modular API

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web namespaced API

var database = firebase.database();

Lettura e scrittura di elenchi

Aggiungi a un elenco di dati

Utilizzare il metodo push() per aggiungere dati a un elenco nelle applicazioni multiutente. Il metodo push() genera una chiave univoca ogni volta che un nuovo figlio viene aggiunto al riferimento Firebase specificato. Utilizzando queste chiavi generate automaticamente per ogni nuovo elemento nell'elenco, diversi client possono aggiungere elementi secondari nella stessa posizione contemporaneamente senza conflitti di scrittura. La chiave univoca generata da push() si basa su un timestamp, quindi gli elementi dell'elenco vengono automaticamente ordinati cronologicamente.

È possibile utilizzare il riferimento ai nuovi dati restituiti dal metodo push() per ottenere il valore della chiave generata automaticamente dal figlio o impostare i dati per il figlio. La proprietà .key di un riferimento push() contiene la chiave generata automaticamente.

Puoi utilizzare queste chiavi generate automaticamente per semplificare l'appiattimento della struttura dei dati. Per ulteriori informazioni, vedere l' esempio di distribuzione dei dati.

Ad esempio, push() potrebbe essere utilizzato per aggiungere un nuovo post a un elenco di post in un'applicazione social:

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

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

Ascolta gli eventi per bambini

Gli eventi figlio vengono attivati ​​in risposta a operazioni specifiche che accadono ai figli di un nodo da un'operazione come un nuovo figlio aggiunto tramite il metodo push() o un figlio aggiornato tramite il metodo update() .

Evento Utilizzo tipico
child_added Recupera elenchi di elementi o ascolta eventuali aggiunte a un elenco di elementi. Questo evento viene attivato una volta per ogni figlio esistente e poi di nuovo ogni volta che un nuovo figlio viene aggiunto al percorso specificato. All'ascoltatore viene passata un'istantanea contenente i dati del nuovo figlio.
child_changed Ascolta le modifiche agli elementi in un elenco. Questo evento viene attivato ogni volta che un nodo figlio viene modificato. Ciò include qualsiasi modifica ai discendenti del nodo figlio. Lo snapshot passato al listener di eventi contiene i dati aggiornati per il bambino.
child_removed Ascolta gli elementi che vengono rimossi da un elenco. Questo evento viene attivato quando viene rimosso un figlio immediato. Lo snapshot passato al blocco di callback contiene i dati per il figlio rimosso.
child_moved Ascolta le modifiche all'ordine degli elementi in un elenco ordinato. Gli eventi child_moved seguono sempre l'evento child_changed che ha causato la modifica dell'ordine dell'articolo (in base al metodo di ordinamento corrente).

Ognuno di questi insieme può essere utile per ascoltare le modifiche a un nodo specifico in un database. Ad esempio, un'app di social blogging potrebbe utilizzare questi metodi insieme per monitorare l'attività nei commenti di un post, come mostrato di seguito:

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

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

Ascolta gli eventi di valore

Anche se l'ascolto degli eventi figlio è il modo consigliato per leggere elenchi di dati, in alcune situazioni è utile ascoltare gli eventi valore in un riferimento a un elenco.

Collegare un osservatore value a un elenco di dati restituirà l'intero elenco di dati come un'unica istantanea su cui è possibile eseguire il loop per accedere ai singoli figli.

Anche quando esiste una sola corrispondenza per la query, lo snapshot è pur sempre un elenco; contiene solo un singolo elemento. Per accedere all'elemento, è necessario eseguire il loop del risultato:

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

Web namespaced API

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

Questo modello può essere utile quando si desidera recuperare tutti gli elementi secondari di un elenco in un'unica operazione, anziché attendere ulteriori eventi secondari aggiunti.

Ordinamento e filtraggio dei dati

È possibile utilizzare la classe Realtime Database Query per recuperare i dati ordinati per chiave, valore o valore di un figlio. Puoi anche filtrare il risultato ordinato in base a un numero specifico di risultati o a un intervallo di chiavi o valori.

Ordina i dati

Per recuperare i dati ordinati, inizia specificando uno dei metodi order-by per determinare come vengono ordinati i risultati:

Metodo Utilizzo
orderByChild() Ordina i risultati in base al valore di una chiave figlio specificata o di un percorso figlio nidificato.
orderByKey() Ordina i risultati per chiavi figlio.
orderByValue() Ordina i risultati in base ai valori secondari.

Puoi utilizzare un solo metodo di ordine alla volta. La chiamata di un metodo order-by più volte nella stessa query genera un errore.

L'esempio seguente dimostra come recuperare un elenco dei post principali di un utente ordinati in base al numero di stelle:

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

Web namespaced API

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

Ciò definisce una query che, se combinata con un ascoltatore figlio, sincronizza il client con i post dell'utente dal percorso nel database in base al suo ID utente, ordinato in base al numero di stelle che ciascun post ha ricevuto. Questa tecnica di utilizzo degli ID come chiavi di indice è chiamata fan out dei dati, puoi leggere ulteriori informazioni in Struttura il tuo database .

La chiamata al metodo orderByChild() specifica la chiave figlio in base alla quale ordinare i risultati. In questo caso, i post vengono ordinati in base al valore del rispettivo figlio "starCount" . Le query possono anche essere ordinate per figli nidificati, nel caso in cui si disponga di dati simili a questi:

"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 questo caso, possiamo ordinare gli elementi della nostra lista in base a valori nidificati sotto la chiave metrics specificando il percorso relativo al figlio nidificato nella nostra chiamata orderByChild() .

Web modular API

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

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

Web namespaced API

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

Per ulteriori informazioni su come vengono ordinati gli altri tipi di dati, vedere Come vengono ordinati i dati delle query .

Filtraggio dei dati

Per filtrare i dati, è possibile combinare qualsiasi metodo di limite o intervallo con un metodo di ordinamento durante la costruzione di una query.

Metodo Utilizzo
limitToFirst() Imposta il numero massimo di elementi da restituire dall'inizio dell'elenco ordinato di risultati.
limitToLast() Imposta il numero massimo di elementi da restituire dalla fine dell'elenco ordinato di risultati.
startAt() Restituisce elementi maggiori o uguali alla chiave o al valore specificato, a seconda del metodo di ordine scelto.
startAfter() Restituisce elementi maggiori della chiave o del valore specificato a seconda del metodo di ordine scelto.
endAt() Restituisce elementi inferiori o uguali alla chiave o al valore specificato, a seconda del metodo di ordine scelto.
endBefore() Restituisce gli elementi inferiori alla chiave o al valore specificato a seconda del metodo di ordine scelto.
equalTo() Restituisce elementi uguali alla chiave o al valore specificato, a seconda del metodo di ordine scelto.

A differenza dei metodi ordinati, è possibile combinare più funzioni di limite o intervallo. Ad esempio, puoi combinare i metodi startAt() e endAt() per limitare i risultati a un intervallo di valori specificato.

Limita il numero di risultati

Puoi utilizzare i metodi limitToFirst() e limitToLast() per impostare un numero massimo di figli da sincronizzare per un determinato evento. Ad esempio, se utilizzi limitToFirst() per impostare un limite di 100, inizialmente riceverai solo fino a 100 eventi child_added . Se hai meno di 100 elementi archiviati nel tuo database Firebase, viene attivato un evento child_added per ciascun elemento.

Man mano che gli elementi cambiano, ricevi eventi child_added per gli elementi che entrano nella query ed eventi child_removed per gli elementi che ne escono, in modo che il numero totale rimanga su 100.

L'esempio seguente dimostra come l'app di blogging di esempio definisce una query per recuperare un elenco dei 100 post più recenti di tutti gli utenti:

Web modular API

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

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

Web namespaced API

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

Questo esempio definisce solo una query, per sincronizzare effettivamente i dati è necessario avere un ascoltatore collegato.

Filtra per chiave o valore

È possibile utilizzare startAt() , startAfter() , endAt() , endBefore() e equalTo() per scegliere punti iniziali, finali ed equivalenze arbitrari per le query. Ciò può essere utile per impaginare i dati o trovare elementi con elementi secondari che hanno un valore specifico.

Come vengono ordinati i dati della query

Questa sezione spiega come i dati vengono ordinati in base a ciascuno dei metodi order-by nella classe Query .

orderByChild

Quando si utilizza orderByChild() , i dati che contengono la chiave figlio specificata vengono ordinati come segue:

  1. I bambini con un valore null per la chiave figlio specificata vengono prima.
  2. I figli con un valore false per la chiave figlio specificata vengono dopo. Se più figli hanno un valore false , vengono ordinati lessicograficamente per chiave.
  3. I figli con un valore true per la chiave figlio specificata vengono dopo. Se più figli hanno un valore true , vengono ordinati lessicograficamente per chiave.
  4. Seguono i bambini con un valore numerico, ordinati in ordine crescente. Se più figli hanno lo stesso valore numerico per il nodo figlio specificato, vengono ordinati per chiave.
  5. Le stringhe vengono dopo i numeri e sono ordinate lessicograficamente in ordine crescente. Se più figli hanno lo stesso valore per il nodo figlio specificato, vengono ordinati lessicograficamente per chiave.
  6. Gli oggetti vengono per ultimi e sono ordinati lessicograficamente per chiave in ordine crescente.

orderByKey

Quando si utilizza orderByKey() per ordinare i dati, i dati vengono restituiti in ordine crescente per chiave.

  1. I figli con una chiave che può essere analizzata come intero a 32 bit vengono prima, ordinati in ordine crescente.
  2. Seguono i bambini con un valore stringa come chiave, ordinati lessicograficamente in ordine crescente.

orderByValue

Quando si utilizza orderByValue() , i bambini vengono ordinati in base al loro valore. I criteri di ordinamento sono gli stessi di orderByChild() , tranne per il fatto che viene utilizzato il valore del nodo invece del valore di una chiave figlio specificata.

Distacca gli ascoltatori

I callback vengono rimossi chiamando il metodo off() sul riferimento al database Firebase.

Puoi rimuovere un singolo ascoltatore passandolo come parametro a off() . La chiamata off() sulla posizione senza argomenti rimuove tutti gli ascoltatori in quella posizione.

La chiamata off() su un ascoltatore genitore non rimuove automaticamente gli ascoltatori registrati sui suoi nodi figli; off() deve essere chiamato anche su tutti gli ascoltatori figli per rimuovere la richiamata.

Prossimi passi