Lavora con elenchi di dati sul Web

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Ottieni un riferimento al database

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

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Lettura e scrittura di liste

Aggiungi a un elenco di dati

Utilizzare il metodo push() per aggiungere dati a un elenco in applicazioni multiutente. Il metodo push() genera una chiave univoca ogni volta che viene aggiunto un nuovo figlio al riferimento Firebase specificato. Utilizzando queste chiavi generate automaticamente per ogni nuovo elemento nell'elenco, diversi client possono aggiungere figli 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 fan-out dei dati.

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

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

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 le aggiunte a un elenco di elementi. Questo evento viene attivato una volta per ogni figlio esistente e poi di nuovo ogni volta che viene aggiunto un nuovo figlio al percorso specificato. Al listener viene passato uno snapshot contenente i dati del nuovo figlio.
child_changed Ascolta le modifiche agli elementi in un elenco. Questo evento viene attivato ogni volta che viene modificato un nodo figlio. Ciò include eventuali modifiche ai discendenti del nodo figlio. Lo snapshot passato al listener di eventi contiene i dati aggiornati per il figlio.
child_removed Ascolta gli elementi 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 order-by 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 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);
});

Ascolta gli eventi di valore

Sebbene l'ascolto di eventi figlio sia il modo consigliato per leggere elenchi di dati, ci sono situazioni in cui l'ascolto di eventi valore su un riferimento di elenco è utile.

L'associazione di un osservatore di value a un elenco di dati restituirà l'intero elenco di dati come un'unica istantanea che è quindi possibile eseguire in loop per accedere ai singoli elementi figlio.

Anche quando c'è una sola corrispondenza per la query, lo snapshot è ancora un elenco; contiene solo un singolo elemento. Per accedere all'elemento, è necessario scorrere il risultato in loop:

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

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

Ordinamento e filtraggio dei dati

È possibile utilizzare la classe Realtime Database Query per recuperare i dati ordinati per chiave, per valore o per 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 o di un percorso figlio nidificato specificato.
orderByKey() Ordina i risultati per chiavi figlio.
orderByValue() Ordina i risultati per valori figlio.

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

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

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

Questo 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 loro ID utente, ordinato in base al numero di stelle che ogni post ha ricevuto. Questa tecnica di utilizzo degli ID come chiavi di indice è chiamata data fan out, puoi saperne di più in Structure Your 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 questo:

"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 ai valori nidificati sotto la chiave della metrics specificando il percorso relativo al figlio nidificato nella nostra chiamata orderByChild() .

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

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

Filtraggio dei dati

Per filtrare i dati, puoi combinare qualsiasi metodo limit o range con un metodo order-by 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 di risultati ordinato.
startAt() Restituisci articoli maggiori o uguali alla chiave o al valore specificato, a seconda del metodo di ordinazione scelto.
startAfter() Restituisci articoli superiori alla chiave o al valore specificato a seconda del metodo di ordinazione scelto.
endAt() Restituisci articoli inferiori o uguali alla chiave o al valore specificato, a seconda del metodo di ordinazione scelto.
endBefore() Restituisci articoli inferiori alla chiave o al valore specificato a seconda del metodo di ordinazione scelto.
equalTo() Restituisci articoli uguali alla chiave o al valore specificato, a seconda del metodo di ordinazione scelto.

A differenza dei metodi order-by, puoi combinare più funzioni di limite o intervallo. Ad esempio, puoi combinare i startAt() ed endAt() per limitare i risultati a un intervallo di valori specificato.

Limita il numero di risultati

È possibile utilizzare i limitToFirst() e limitToLast() per impostare un numero massimo di elementi figlio da sincronizzare per un determinato evento. Ad esempio, se usi limitToFirst() per impostare un limite di 100, inizialmente riceverai solo fino a 100 eventi child_added . Se nel database di Firebase sono archiviati meno di 100 elementi, viene attivato un evento child_added per ogni 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 escono da essa in modo che il numero totale rimanga a 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 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);

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

Filtra per chiave o valore

È possibile utilizzare startAt() , startAfter() , endAt() , endBefore() e equalTo() per scegliere punti di inizio, fine ed equivalenza arbitrari per le query. Questo può essere utile per impaginare i dati o trovare elementi con figli 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. Seguono i figli con un valore false per la chiave figlio specificata. Se più figli hanno un valore di 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. I bambini con un valore numerico vengono dopo, 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 bambini con una chiave che può essere analizzata come un intero a 32 bit vengono prima, ordinati in ordine crescente.
  2. I bambini con un valore stringa come chiave vengono dopo, 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 del database Firebase.

Puoi rimuovere un singolo listener passandolo come parametro a off() . La chiamata off() nella posizione senza argomenti rimuove tutti i listener in quella posizione.

Chiamare off() su un listener genitore non rimuove automaticamente gli ascoltatori registrati sui suoi nodi figli; off() deve anche essere chiamato su qualsiasi listener figlio per rimuovere il callback.

Prossimi passi