Consulta una colección (firebase) desde javascript

tecnicoweb Firebase, Javascript, Programación Web

Vamos a consulta una colección de firebase (Cloud Firestore) desde javascript.

Lo primero que necesitamos es los datos de configuración que nos lo va a proporciona el mismo firebase, entramos en https://console.firebase.google.com/ seleccionamos el proyecto, a continuación pinchamos en rulina de la izquierda (ver la imagen)

Una vez dentro de la configuración bajamos hasta el apartado «Firebase SDK snippet» copiamos el código javascript y nos lo llevamos a nuestra fichero html.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxx",
    appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

En el siguiente código vamos a iniciar la conexión a partir de la configuración que hemos obtenido ante desde firebase.

firebase.initializeApp(config);
var db = firebase.firestore();

Ya estaríamos conectado, para realizar una consulta de datos sería con la propiedad «collection»

db.collection("coches").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
           console.log("Id",doc.id);
           console.log("Datos",doc.data());
        });
    });

Mostraremos por consola el «Id» y los «Datos» de nuestra tabla «coches»

Si queremos ordenar el listado por un campos, habría que añadir «orderBy».

db.collection("coches").orderBy("fechaPublicacion", "desc").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
           console.log("Id",doc.id);
           console.log("Datos",doc.data());
        });
    });

Nos arrojara el listado de coches ordenado por «fechaPublicacion».

El código javascript (yo lo he incorporado en un fichero html) completo quedaría así:

<script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
        projectId: "xxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxxx",
        appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxx",
        measurementId: "G-xxxxxxxxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();

    firebase.initializeApp(config);
    var db = firebase.firestore();

    db.collection("coches").orderBy("fechaPublicacion", "desc").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log("Id", doc.id);
            console.log("Datos", doc.data());
        });
    });

</script>

Si queremos hacer una consulta para filtrar los resultados sería añadiendo «where» :

db.collection("coches").where("diesel", "==", "si")
.get().then(function (querySnapshot) {
    querySnapshot.forEach(function (doc) {
           console.log("Id", doc.id);
           console.log("Datos", doc.data());
    });
});

Para recuperar un solo documento por su id:

 db.collection("coches").doc("5LMBbOG8vHWAEKb77wBv")
    .get().then(function (doc) {
            var coche = doc.data();
            console.log("Coche", coche);
    }).catch(function (error) {
            console.log("Error", error);
    });

32.370 thoughts to “Consulta una colección (firebase) desde javascript”

  133. Wonderful web site. A lot of useful info here. I am sending it to some pals ans additionally sharing in delicious. And obviously, thank you for your sweat!

  233. Que tengas un buen día. Me encanta su página web. Reseñas de productos en los países de habla hispana 2022 https://telegra.ph/Cocoa-Slim-en-Argentina-06-30. Y también me gustaría añadir – El té verde está repleto de compuestos llamados catequinas, cruzados de la grasa del vientre que la hacen estallar al acelerar el metabolismo, aumentar la liberación de grasa de las células adiposas y acelerar la capacidad de quemar grasa del hígado. En un estudio de la Sociedad Americana de Fisiología, los participantes que combinaron un hábito diario de 4 a 5 tazas de verde aumentaron su resistencia al ejercicio hasta en un 24 por ciento, acelerando la pérdida de peso.

  375. Hi there I am so grateful I found your webpage, I really found you by error, while I
    was searching on Aol for something else, Anyways I
    am here now and would just like to say cheers for a tremendous post and a all round entertaining blog (I
    also love the theme/design), I don’t have time to read through it all at
    the moment but I have saved it and also added in your RSS feeds, so when I have time I will be
    back to read much more, Please do keep up the superb job.

  867. Can I just say what a comfort to find somebody who truly understands what theyre talking about on the net. You certainly understand how to bring a problem to light and make it important. A lot more people really need to look at this and understand this side of the story. I cant believe youre not more popular because you definitely possess the gift.