Utilizza elenchi di dati sul Web

Recuperare un riferimento a un database

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

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web

var database = firebase.database();

Lettura e scrittura di elenchi

Aggiungere elementi a un elenco di dati

Utilizza il metodo push() per accodare dati a un elenco in applicazioni multiutente. Il metodo push() genera una chiave univoca ogni volta che viene aggiunto un nuovo elemento secondario al riferimento Firebase specificato. Utilizzando queste chiavi generate automaticamente per ogni nuovo elemento dell'elenco, più client possono aggiungere elementi secondari alla stessa posizione contemporaneamente senza conflitti di scrittura. La chiave univoca generata da push() si basa su un timestamp, pertanto gli elementi dell'elenco vengono ordinati automaticamente in ordine cronologico.

Puoi utilizzare il riferimento ai nuovi dati restituiti dal metodo push() per ottenere il valore della chiave generata automaticamente dell'elemento secondario o impostare i dati per l'elemento secondario. 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, consulta l'esempio di fan-out dei dati.

Ad esempio, push() potrebbe essere utilizzato per aggiungere un nuovo post a un elenco di post in un'applicazione di 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, {
    // ...
});

Web

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

Gli eventi secondari vengono attivati in risposta a operazioni specifiche che si verificano per i figli di un nodo da un'operazione, ad esempio 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 le aggiunte a un elenco di elementi. Questo evento viene attivato una volta per ogni elemento secondario esistente e poi di nuovo ogni volta che viene aggiunto un nuovo elemento secondario al percorso specificato. All'ascoltatore viene passato uno snapshot contenente i dati del nuovo bambino.
child_changed Rileva le modifiche agli elementi di un elenco. Questo evento viene attivato ogni volta che un nodo secondario viene modificato. Sono incluse eventuali modifiche ai discendenti del nodo figlio. Lo snapshot passato all'ascoltatore di eventi contiene i dati aggiornati per l'elemento secondario.
child_removed Ascolta gli elementi che vengono rimossi da un elenco. Questo evento viene attivato quando viene rimosso un elemento figlio immediato.Lo snapshot passato al blocco di callback contiene i dati dell'elemento figlio rimosso.
child_moved Rileva 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'elemento (in base al metodo di ordinamento corrente).

Insieme, questi elementi possono essere utili per ascoltare le modifiche apportate a un determinato node in un database. Ad esempio, un'app di blogging social potrebbe utilizzare questi metodi insieme per monitorare l'attività nei commenti di un post, come mostrato di seguito:

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

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

Ascolta gli eventi relativi ai valori

Sebbene l'ascolto degli eventi secondari sia il modo consigliato per leggere gli elenchi di dati, in alcune situazioni è utile ascoltare gli eventi di valore in un riferimento elenco.

Se colleghi un osservatore value a un elenco di dati, verrà restituito l'intero elenco di dati come un'unica istantanea, che potrai poi eseguire in loop per accedere ai singoli elementi secondari.

Anche se esiste una sola corrispondenza per la query, lo snapshot è comunque un elenco, ma contiene un solo elemento. Per accedere all'elemento, devi eseguire un loop sul risultato:

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

Web

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

Questo pattern può essere utile quando vuoi recuperare tutti gli elementi secondari di un elenco in un'unica operazione, anziché ascoltare altri eventi di aggiunta di elementi secondari.

Ordinamento e filtri dei dati

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

Ordinare i dati

Per recuperare i dati ordinati, inizia specificando uno dei metodi di ordinamento per determinare l'ordinamento dei risultati:

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

Puoi utilizzare un solo metodo di ordinamento alla volta. La chiamata di un metodo di ordinamento più volte nella stessa query genera un errore.

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

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

Web

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

Questa definisce una query che, se combinata con un listener secondario, consente di sincronizzare il client con i post dell'utente dal percorso nel database in base al relativo ID utente, ordinati in base al numero di stelle ricevute da ciascun post. Questa tecnica di utilizzo degli ID come chiavi di indice è chiamata fan out dei dati. Puoi scoprire di più in Strutturare il database.

La chiamata al metodo orderByChild() specifica la chiave secondaria in base alla quale ordinare i risultati. In questo caso, i post vengono ordinati in base al valore del rispettivo elemento secondario "starCount". Le query possono essere ordinate anche per elementi figli nidificati, nel caso in cui tu abbia dati come:

"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 dell'elenco in base ai valori nidificati sotto la chiave metrics specificando il percorso relativo all'elemento secondario nidificato nella chiamata orderByChild().

Web

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

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

Web

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

Per ulteriori informazioni sull'ordinamento di altri tipi di dati, consulta Come vengono ordinati i dati delle query.

Filtrare i dati

Per filtrare i dati, puoi combinare uno dei metodi di limite o intervallo con un metodo di ordinamento durante la creazione di una query.

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

A differenza dei metodi di ordinamento, puoi 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 elementi secondari da sincronizzare per un determinato evento. Ad esempio, se utilizzi limitToFirst() per impostare un limite di 100, inizialmente riceverai solo fino a 100 eventi limitToFirst().child_added Se hai meno di 100 elementi archiviati nel database Firebase, viene attivato un evento child_added per ogni elemento.

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

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

Web

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

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

Web

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

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

Filtra per chiave o valore

Puoi utilizzare startAt(), startAfter(),endAt(), endBefore() e equalTo() per scegliere punti di inizio, di fine ed equivalenza arbitrari per le query. Questa operazione può essere utile per paginare i dati o trovare elementi con elementi secondari che hanno un valore specifico.

Come vengono ordinati i dati delle query

Questa sezione spiega come vengono ordinati i dati in base a ciascuno dei metodi di ordinamento della classe Query.

orderByChild

Quando utilizzi orderByChild(), i dati che contengono la chiave secondaria specificata sono ordinati come segue:

  1. I figli con un valore null per la chiave secondaria specificata vengono visualizzati per primi.
  2. Gli elementi secondari con un valore false per la chiave secondaria specificata vengono visualizzati successivamente. Se più elementi secondari hanno un valore false, vengono ordinati in ordine alfabetico in base alla chiave.
  3. Gli elementi secondari con un valore true per la chiave secondaria specificata vengono visualizzati successivamente. Se più elementi secondari hanno un valore true, vengono alfabetizzati in base alla chiave.
  4. Seguono gli elementi secondari con un valore numerico, ordinati in ordine crescente. Se più elementi secondari hanno lo stesso valore numerico per il nodo secondario specificato, vengono ordinati in base alla chiave.
  5. Le stringhe vengono visualizzate dopo i numeri e sono ordinate in ordine crescente in base alla loro sequenza lessicografica. Se più elementi figlio hanno lo stesso valore per il nodo figlio specificato, vengono ordinati in ordine alfabetico per chiave.
  6. Gli oggetti sono gli ultimi e vengono ordinati in ordine lessicografico per chiave in ordine crescente.

orderByKey

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

  1. I figli con una chiave che può essere analizzata come numero intero a 32 bit vengono visualizzati per primi, in ordine crescente.
  2. Seguono gli elementi secondari con una stringa come chiave, ordinati in ordine lessicografico crescente.

orderByValue

Quando utilizzi orderByValue(), gli elementi secondari 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 anziché il valore di una chiave secondaria specificata.

Scollegare 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 a off() sulla posizione senza argomenti rimuove tutti gli ascoltatori in quella posizione.

La chiamata a off() su un ascoltatore principale nonrimuove automaticamente gli ascoltatori registrati sui relativi nodi secondari.off() deve essere chiamato anche su tutti gli ascoltatori secondari per rimuovere il callback.

Passaggi successivi