获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

Trabajar con Listas de Datos en la Web

Obtener una referencia de base de datos

Para leer o escribir datos de la base de datos, necesita una instancia de firebase.database.Reference :

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Leer y escribir listas.

Agregar a una lista de datos

Utilice el método push() para agregar datos a una lista en aplicaciones multiusuario. El método push() genera una clave única cada vez que se agrega un nuevo elemento secundario a la referencia de Firebase especificada. Mediante el uso de estas claves generadas automáticamente para cada nuevo elemento de la lista, varios clientes pueden agregar niños a la misma ubicación al mismo tiempo sin conflictos de escritura. La clave única generada por push() se basa en una marca de tiempo, por lo que los elementos de la lista se ordenan cronológicamente automáticamente.

Puede usar la referencia a los nuevos datos devueltos por el método push() para obtener el valor de la clave generada automáticamente del niño o establecer datos para el niño. La propiedad .key de una referencia push() contiene la clave generada automáticamente.

Puede usar estas claves generadas automáticamente para simplificar el aplanamiento de su estructura de datos. Para obtener más información, consulte el ejemplo de despliegue de datos.

Por ejemplo, push() podría usarse para agregar una nueva publicación a una lista de publicaciones en una aplicación 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({
    // ...
});

Escuche los eventos de los niños

Los eventos secundarios se desencadenan en respuesta a operaciones específicas que les suceden a los elementos secundarios de un nodo a partir de una operación, como un nuevo elemento secundario agregado a través del método push() o un elemento secundario que se actualiza a través del método update() .

Evento Uso típico
child_added Recupere listas de elementos o escuche adiciones a una lista de elementos. Este evento se activa una vez para cada elemento secundario existente y luego nuevamente cada vez que se agrega un elemento secundario nuevo a la ruta especificada. Al oyente se le pasa una instantánea que contiene los datos del nuevo niño.
child_changed Escuche los cambios en los elementos de una lista. Este evento se desencadena cada vez que se modifica un nodo secundario. Esto incluye cualquier modificación a los descendientes del nodo secundario. La instantánea que se pasa al detector de eventos contiene los datos actualizados del niño.
child_removed Escuche los elementos que se eliminan de una lista. Este evento se activa cuando se elimina un elemento secundario inmediato. La instantánea que se pasa al bloque de devolución de llamada contiene los datos del elemento secundario eliminado.
child_moved Escuche los cambios en el orden de los elementos en una lista ordenada. Los eventos child_moved siempre siguen al evento child_changed que causó el cambio en el orden del artículo (según su método actual de ordenación).

Cada uno de estos juntos puede ser útil para escuchar cambios en un nodo específico en una base de datos. Por ejemplo, una aplicación de blogs sociales podría usar estos métodos juntos para monitorear la actividad en los comentarios de una publicación, como se muestra a continuación:

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

Escuche los eventos de valor

Si bien escuchar eventos secundarios es la forma recomendada de leer listas de datos, hay situaciones en las que es útil escuchar eventos de valor en una referencia de lista.

Adjuntar un observador de value a una lista de datos devolverá la lista completa de datos como una instantánea única que luego puede recorrer para acceder a niños individuales.

Incluso cuando solo hay una única coincidencia para la consulta, la instantánea sigue siendo una lista; solo contiene un solo elemento. Para acceder al elemento, debe recorrer el resultado:

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

Este patrón puede ser útil cuando desea obtener todos los elementos secundarios de una lista en una sola operación, en lugar de escuchar eventos secundarios agregados adicionales.

Ordenar y filtrar datos

Puede usar la clase de Query de base de datos en tiempo real para recuperar datos ordenados por clave, por valor o por valor de un elemento secundario. También puede filtrar el resultado ordenado a un número específico de resultados o un rango de claves o valores.

Ordenar datos

Para recuperar datos ordenados, comience especificando uno de los métodos de ordenación para determinar cómo se ordenan los resultados:

Método Uso
orderByChild() Ordene los resultados por el valor de una clave secundaria especificada o una ruta secundaria anidada.
orderByKey() Ordene los resultados por claves secundarias.
orderByValue() Ordene los resultados por valores secundarios.

Solo puede usar un método de ordenar a la vez. Llamar a un método order-by varias veces en la misma consulta genera un error.

El siguiente ejemplo demuestra cómo puede recuperar una lista de las publicaciones principales de un usuario ordenadas por su número de estrellas:

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

Esto define una consulta que, cuando se combina con un oyente secundario, sincroniza el cliente con las publicaciones del usuario desde la ruta en la base de datos en función de su ID de usuario, ordenadas por la cantidad de estrellas que ha recibido cada publicación. Esta técnica de usar ID como claves de índice se llama despliegue de datos, puede leer más sobre esto en Estructura de su base de datos .

La llamada al método orderByChild() especifica la clave secundaria por la que ordenar los resultados. En este caso, las publicaciones se ordenan por el valor de su respectivo hijo "starCount" . Las consultas también se pueden ordenar por hijos anidados, en caso de que tenga datos como este:

"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",
  }
},

En este caso, podemos ordenar los elementos de nuestra lista por valores anidados bajo la clave de metrics especificando la ruta relativa al elemento secundario anidado en nuestra llamada 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');

Para obtener más información sobre cómo se ordenan otros tipos de datos, consulte Cómo se ordenan los datos de consulta .

Filtrado de datos

Para filtrar datos, puede combinar cualquiera de los métodos de límite o rango con un método de ordenación al construir una consulta.

Método Uso
limitToFirst() Establece el número máximo de elementos que se devolverán desde el principio de la lista ordenada de resultados.
limitToLast() Establece el número máximo de elementos que se devolverán desde el final de la lista ordenada de resultados.
startAt() Devuelve elementos mayores o iguales que la clave o el valor especificado, según el método de ordenación elegido.
startAfter() Devuelve elementos mayores que la clave o el valor especificados según el método de orden elegido.
endAt() Devuelve elementos menores o iguales que la clave o el valor especificado, según el método de ordenación elegido.
endBefore() Devuelve artículos con una clave o valor inferior a los especificados según el método de ordenación elegido.
equalTo() Devuelve elementos iguales a la clave o valor especificado, según el método de ordenación elegido.

A diferencia de los métodos order-by, puede combinar múltiples funciones de límite o rango. Por ejemplo, puede combinar los startAt() y endAt() para limitar los resultados a un rango específico de valores.

Limitar el número de resultados

Puede usar los limitToFirst() y limitToLast() para establecer una cantidad máxima de elementos secundarios que se sincronizarán para un evento determinado. Por ejemplo, si usa limitToFirst() para establecer un límite de 100, inicialmente solo recibirá hasta 100 eventos child_added . Si tiene menos de 100 elementos almacenados en su base de datos de Firebase, se activa un evento child_added para cada elemento.

A medida que los elementos cambian, recibe eventos child_added para los elementos que ingresan a la consulta y eventos child_removed para los elementos que la abandonan, de modo que el número total permanece en 100.

El siguiente ejemplo demuestra cómo la aplicación de blogs de ejemplo define una consulta para recuperar una lista de las 100 publicaciones más recientes de todos los usuarios:

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

Este ejemplo solo define una consulta, para sincronizar datos realmente necesita tener un oyente adjunto.

Filtrar por clave o valor

Puede usar startAt() , startAfter() , endAt() , endBefore() y equalTo() para elegir puntos de equivalencia, inicio y finalización arbitrarios para las consultas. Esto puede ser útil para paginar datos o encontrar elementos con elementos secundarios que tengan un valor específico.

Cómo se ordenan los datos de consulta

Esta sección explica cómo se ordenan los datos por cada uno de los métodos order-by en la clase Query .

orderByChild

Cuando se usa orderByChild() , los datos que contienen la clave secundaria especificada se ordenan de la siguiente manera:

  1. Los elementos secundarios con un valor null para la clave secundaria especificada vienen primero.
  2. Los elementos secundarios con un valor false para la clave secundaria especificada vienen a continuación. Si varios hijos tienen un valor de false , se ordenan lexicográficamente por clave.
  3. Los elementos secundarios con un valor de true para la clave secundaria especificada vienen a continuación. Si varios hijos tienen un valor de true , se ordenan lexicográficamente por clave.
  4. Los niños con un valor numérico vienen a continuación, ordenados en orden ascendente. Si varios elementos secundarios tienen el mismo valor numérico para el nodo secundario especificado, se ordenan por clave.
  5. Las cadenas vienen después de los números y se clasifican lexicográficamente en orden ascendente. Si varios hijos tienen el mismo valor para el nodo hijo especificado, se ordenan lexicográficamente por clave.
  6. Los objetos van en último lugar y se ordenan lexicográficamente por clave en orden ascendente.

orderByKey

Cuando usa orderByKey() para ordenar sus datos, los datos se devuelven en orden ascendente por clave.

  1. Los elementos secundarios con una clave que se puede analizar como un entero de 32 bits aparecen primero, ordenados en orden ascendente.
  2. Los niños con un valor de cadena como clave vienen a continuación, ordenados lexicográficamente en orden ascendente.

orderByValue

Cuando se usa orderByValue() , los elementos secundarios se ordenan por su valor. Los criterios de ordenación son los mismos que en orderByChild() , excepto que se usa el valor del nodo en lugar del valor de una clave secundaria especificada.

Separar oyentes

Las devoluciones de llamada se eliminan llamando al método off() en la referencia de la base de datos de Firebase.

Puede eliminar un único oyente pasándolo como parámetro a off() . Calling off() en la ubicación sin argumentos elimina todos los oyentes en esa ubicación.

Calling off() en un agente de escucha principal no elimina automáticamente los agentes de escucha registrados en sus nodos secundarios; off() también debe llamarse en cualquier oyente secundario para eliminar la devolución de llamada.

Próximos pasos