Lavora con elenchi di dati sul Web

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

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

Liste di lettura e scrittura

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 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 alla 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 del 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 figlio

Gli eventi figlio vengono attivati ​​in risposta a operazioni specifiche che si verificano sui 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 Uso 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 qualsiasi modifica ai discendenti del nodo figlio. Lo snapshot passato al listener di eventi contiene i dati aggiornati per il figlio.
child_removed Ascolta gli elementi che vengono rimossi da un elenco. Questo evento viene attivato quando un figlio immediato viene rimosso. 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

Mentre l'ascolto di eventi figlio è il modo consigliato per leggere elenchi di dati, ci sono situazioni in cui l'ascolto di eventi valore su un riferimento 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 il ciclo per accedere ai singoli elementi figlio.

Anche quando c'è solo una singola corrispondenza per la query, lo snapshot è ancora un elenco; contiene solo un singolo elemento. Per accedere all'elemento, è necessario eseguire il ciclo sul risultato:

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 secondari di un elenco in un'unica operazione, piuttosto che attendere ulteriori eventi secondari 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, iniziare 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 per valori figlio.

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

L'esempio seguente mostra come recuperare un elenco dei post principali 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 child listener, 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 ogni post ha ricevuto. Questa tecnica di utilizzo degli ID come chiavi di indice è chiamata data fan out, puoi leggere ulteriori informazioni 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 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 ai valori nidificati sotto la chiave 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 delle query .

Filtraggio dei dati

Per filtrare i dati, puoi combinare uno qualsiasi dei metodi 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 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 ordinazione scelto.
startAfter() Restituisce gli elementi maggiori della chiave o del valore specificato a seconda del metodo di ordinazione scelto.
endAt() Restituisce gli elementi inferiori o uguali alla chiave o al valore specificato, a seconda del metodo di ordinazione scelto.
endBefore() Restituisce gli elementi inferiori alla chiave o al valore specificato a seconda del metodo di ordinazione scelto.
equalTo() Restituisce elementi uguali alla chiave o al valore specificato, a seconda del metodo di ordinazione scelto.

A differenza dei metodi order-by, è possibile combinare più funzioni limite o intervallo. Ad esempio, è possibile combinare i startAt() e 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 secondari da sincronizzare per un determinato evento. Ad esempio, se utilizzi limitToFirst() per impostare un limite di 100, inizialmente ricevi solo fino a 100 eventi child_added . Se hai meno di 100 elementi archiviati nel database Firebase, viene generato 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 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 deve avere un listener collegato.

Filtra per chiave o valore

È possibile utilizzare startAt() , startAfter() , endAt() , endBefore() e equalTo() per scegliere punti di inizio, fine e 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 delle 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. Gli elementi figlio con un valore null per la chiave figlio specificata vengono per primi.
  2. I bambini 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 bambini 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 bambini con una chiave che può essere analizzata come numero 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 figli 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 listener passandolo come parametro a off() . Chiamare off() sulla posizione senza argomenti rimuove tutti i listener in quella posizione.

Chiamare off() su un listener genitore non rimuove automaticamente i listener registrati sui suoi nodi figli; off() deve essere chiamato anche su qualsiasi listener figlio per rimuovere la richiamata.

Prossimi passi