Home / Questions / 366777
Accepted
Daniel Rivas
Asked: 2020-06-19 19:59:40 +0800 CST 2020-06-19 19:59:40 +0800 CST

Query data in Firestore (Firebase)

  • 772

I want to perform a query in my web app, it is connected to Cloud Firestore (Firebase), I added a text box with the id search_client, I need the name that the user writes to display it in my HTML table only, I have this code:

HTML:

        <h3>Buscar cliente:</h3>
        <center><input type="text" id="buscar_cliente" placeholder="Nombre del cliente" class="form-control my-2"></center>
        <button class="btn btn-warning" id="botonbuscar" onclick="buscar()">Buscar cliente</button>
        <br><br>-->
        <br>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Nombre</th>
                    <th scope="col">Fecha</th>
                    <th scope="col">Hora</th>
                    <th scope="col">Telefono</th>
                    <th scope="col">Eliminar</th>
                    <th scope="col">Editar</th>
                </tr>
            </thead>
            <tbody id="tabla">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

JS:

function buscar() {
    document.getElementById('buscar_cliente').value = nombre;
    var tabla = document.getElementById('tabla');
    db.collection("citas_registradas").where("nombre", "==", "buscar_cliente").onSnapshot((querySnapshot) => {
        tabla.innerHTML = '';
        querySnapshot.forEach((doc) => {
            console.log(`${doc.id} => ${doc.data().nombre}`);
            tabla.innerHTML += ` 
        <tr>
        <td>${doc.data().nombre}</td>
        <td>${doc.data().fecha}</td>
        <td>${doc.data().hora}</td>
        <td>${doc.data().telefono}</td>
        <td><button class="btn-danger" onclick="eliminar('${doc.id}')">Eliminar</button></td>
        <td><button class="btn-warning" onclick="editar('${doc.id}','${doc.data().nombre}','${doc.data().fecha}','${doc.data().hora}','${doc.data().telefono}')">Editar</button></td>
        </tr>`
        });
    });
}

But it doesn't show me anything, and if I change the value "buscar_cliente"in my JS and put for example "Daniel Rivas" if it searches, any solution?

javascript

1 Answers

  1. Best Answer

    To get the value of the text box it has to be as follows:

    var nombre_cliente = document.getElementById("buscar_cliente").value;

    And then use the variable to make your query to firebase:

    db.collection("citas_registradas").where("nombre", "==", nombre_cliente).onSnapshot(...
    • 0