Utilizza elenchi di dati sul Web

Recuperare un riferimento del database

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

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();rtdb_get_reference.js

Web

var database = firebase.database();index.js

Leggere e scrivere elenchi

Aggiungere dati a un elenco

Utilizza 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 elemento figlio al riferimento Firebase specificato. Utilizzando queste chiavi generate automaticamente per ogni nuovo elemento dell'elenco, più client possono aggiungere elementi figlio 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 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 figlio o impostare i dati per l'elemento 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, 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 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, {
    // ...
});rtdb_social_push.js

Web

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});lists-of-data.js

Ascoltare gli eventi figlio

Gli eventi figlio vengono attivati in risposta a operazioni specifiche eseguite sugli elementi figlio di un nodo, ad esempio l'aggiunta di un nuovo elemento figlio tramite il metodo push() o l'aggiornamento di un elemento figlio 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 figlio esistente e poi di nuovo ogni volta che viene aggiunto un nuovo elemento figlio al percorso specificato. Al listener viene passato uno snapshot contenente i dati del nuovo elemento figlio.
`child_changed`	Ascolta le modifiche agli elementi di un elenco. Questo evento viene attivato ogni volta che viene modificato un nodo figlio. Sono incluse tutte le modifiche ai discendenti del nodo figlio. Lo snapshot passato al listener di eventi contiene i dati aggiornati dell'elemento figlio.
`child_removed`	Ascolta gli elementi 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`	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'elemento (in base al metodo di ordinamento corrente).

Ognuno di questi eventi 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

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);
});rtdb_social_listen_children.js

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);
});lists-of-data.js

Ascoltare gli eventi di valore

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

Se colleghi un observer value a un elenco di dati, l'intero elenco di dati viene restituito come un singolo snapshot, su cui puoi eseguire un loop per accedere ai singoli elementi figlio.

Anche se la query restituisce una sola corrispondenza, 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
});rtdb_social_listen_value.js

Web

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

Questo pattern può essere utile quando vuoi recuperare tutti gli elementi figlio di un elenco in una singola operazione, anziché ascoltare gli eventi di aggiunta di elementi figlio aggiuntivi.

Ordinare e filtrare i dati

Puoi utilizzare la classe Realtime Database Query per recuperare i dati ordinati per chiave, per valore o per valore di un elemento figlio. 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'ordine dei 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 in base alle chiavi figlio.
`orderByValue()`	Ordina i risultati in base ai valori figlio.

Puoi utilizzare un solo metodo di ordinamento alla volta. Se chiami più volte un metodo di ordinamento nella stessa query, viene generato un errore.

Il seguente esempio mostra come recuperare un elenco dei post più apprezzati 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'));rtdb_social_most_starred.js

Web

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

Questa query, se combinata con un listener figlio sincronizza il client con i post dell'utente dal percorso nel database in base all'ID utente, ordinati in base al numero di stelle ricevute da ogni post. Questa tecnica di utilizzo degli ID come chiavi di indice è chiamata fan-out dei dati. Per saperne di più, consulta Strutturare il 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 elemento figlio "starCount". Le query possono essere ordinate anche in base agli elementi figlio nidificati, nel caso in cui i dati siano strutturati come segue:

"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 figlio 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'));rtdb_social_most_viewed.js

Web

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');lists-of-data.js

Per ulteriori informazioni su come vengono ordinati gli 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 minori della chiave o del 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.

Limitare il numero di risultati

Puoi utilizzare i metodi limitToFirst() e limitToLast() per impostare un numero massimo di elementi figlio 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 nel database Firebase sono memorizzati 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 ne escono, in modo che il numero totale rimanga pari a 100.

Il seguente esempio 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));rtdb_social_recent.js

Web

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);lists-of-data.js

Questo esempio definisce solo una query. Per sincronizzare effettivamente i dati, è necessario collegare un listener.

Filtrare per chiave o valore

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

Come vengono ordinati i dati delle query

Questa sezione spiega come vengono ordinati i dati da ciascuno dei metodi di ordinamento nella classe Query.

`orderByChild`

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

Gli elementi figlio con un valore null per la chiave figlio specificata vengono visualizzati per primi.
Gli elementi figlio con un valore false per la chiave figlio specificata vengono visualizzati successivamente. Se più elementi figlio hanno un valore false, vengono ordinati lessicograficamente per chiave.
Gli elementi figlio con un valore true per la chiave figlio specificata vengono visualizzati successivamente. Se più elementi figlio hanno un valore true, vengono ordinati lessicograficamente per chiave.
Gli elementi figlio con un valore numerico vengono visualizzati successivamente, ordinati in ordine crescente. Se più elementi figlio hanno lo stesso valore numerico per il nodo figlio specificato, vengono ordinati per chiave.
Le stringhe vengono visualizzate dopo i numeri e vengono ordinate lessicograficamente in ordine crescente. Se più elementi figlio hanno lo stesso valore per il nodo figlio specificato, vengono ordinati lessicograficamente per chiave.
Gli oggetti vengono visualizzati per ultimi e vengono ordinati lessicograficamente per chiave in ordine crescente.

`orderByKey`

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

Gli elementi figlio con una chiave che può essere analizzata come un intero a 32 bit vengono visualizzati per primi, ordinati in ordine crescente.
Gli elementi figlio con un valore stringa come chiave vengono visualizzati successivamente, ordinati lessicograficamente in ordine crescente.

`orderByValue`

Quando utilizzi orderByValue(), gli elementi figlio 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 figlio specificata.

Scollegare i listener

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

Puoi rimuovere un singolo listener passandolo come parametro a off(). Se chiami off() nella posizione senza argomenti, vengono rimossi tutti i listener in quella posizione.

Se chiami off() su un listener principale, i listener registrati sui relativi nodi figlio non vengono rimossi automaticamente. Devi chiamare off() anche su tutti i listener figlio per rimuovere il callback.