Utilizza elenchi di dati sul Web

Recuperare un riferimento a un database

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

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

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

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 asset 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:

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

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

Ascolta gli eventi bambino

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().

Ciascuno di questi elementi 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:

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

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

Ascolta gli eventi relativi ai valori

Sebbene l'ascolto di eventi figlio sia il metodo consigliato per leggere elenchi di dati, vi sono situazioni che risulta utile ascoltare gli eventi di valore in un riferimento a un elenco.

Se colleghi un osservatore value a un elenco di dati, l'intero elenco di dati verrà restituito come un singolo snapshot che potrai quindi eseguire il loop per accedere ai singoli elementi figlio.

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:

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

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 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:

Puoi utilizzare un solo metodo di ordinamento alla volta. Chiamare un metodo di ordine per più volte nella stessa query genera un errore.

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

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

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

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 ogni 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().

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

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

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.

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 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:

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

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

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

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. Questo può essere utile per l'impaginazione dei dati o per 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 nella classe Query.

orderByChild

Quando utilizzi orderByChild(), i dati contenenti la chiave secondaria specificata vengono 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. Gli elementi secondari con un valore numerico vengono visualizzati dopo, 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. Figli con un valore stringa come chiave successivo, ordinati lessicograficamente in ordine 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 listener 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

• Scopri come strutturare i dati
• Memorizzare i dati offline