0

Estoy usando Realtime Database de Firebase para almacenar datos de un sensor de temperatura y necesito que en mi página haya una tabla que se actualice constantemente cuando lleguen registros nuevos. Pero al momento en que mi placa Arduino envía datos del sensor a Firebase, en vez de refrescarse la tabla con los registros nuevos, ésta vuelve a cargarlo todo de nuevo incluyendo los nuevos, me explico mejor en la foto:

Así se ve normalmente la tabla: Tabla normal:

Pero cuando resive datos, esto pasa: (Aquí los ingresé manualmente por la consola de Firebase)

Tabla con datos nuevos

Se vuelven a cargar los datos anteriores + el nuevo que acaba de llegar, lo mismo con el timestamp, carga todos + el nuevo constantemente. No eh encontrado una solución para vanilla Javascript, éste es el fragmento de código:

 //TEMPERATURE
  var firebaseRef4 = firebase.database().ref("Placa1/temperatura").limitToLast(5);

  firebaseRef4.on("value", function (snapshot) {
    snapshot.forEach(function (element) {
    document.querySelector('#temperatura').innerHTML += `
    <div style="margin-top: 20px ;">${"    "+ element.val() + " ° C registrados"}</div> <hr>`     
    })
  })

  //TIMESTAMP
  var firebaseRef5 = firebase.database().ref("Placa1/timestamps").limitToLast(5);

  firebaseRef5.on("value", function (snapshot) {
    snapshot.forEach(function (element) {
    document.querySelector('#time').innerHTML += `
    <div style="margin-top: 20px ;"> ${element.val() }</div> <hr> </td> `
    })
  })
  <table id="datos" border="2" style="margin-bottom: 80px;" class="table table-dark">
    <tr>
      <thead style="font-size: large;">
        <th>Temperatura</th>
        <th>Hora de Registro</th>
      </thead>
    </tr>
    <tr>
      <td id="temperatura">
      <td id="time">
    </tr>
  </table> 

Eh intentado usar on.("child_changed") pero de esta forma la tabla no carga, ni siquiera cuando entra un nuevo registro.

Por favor, alguien puede indicarme que puedo hacer para resolver el problema y la tabla cargue constantemente las lecturas?

1 respuesta 1

1

No es firebase, estas tomando todo el elemento cada vez, la primera vez esta vacio, pero la segunda ya tiene "la primera", intenta vaciar el innerHTML antes de empezar.

Hace esto para vaciar el HTML:

document.querySelector('#temperatura').innerHTML = ""
firebaseRef4.on("value", function (snapshot) {

    (aca) document.querySelector('#temperatura').innerHTML = ""
    
    snapshot.forEach(function (element) {

       document.querySelector('#temperatura').innerHTML += `
           <div style="margin-top: 20px ;">
              ${"    "+ element.val() + " ° C registrados"}
           </div> 
           <hr>`  
   
       })
    })
2
  • Muchas Gracias. No sabía que podía vaciar el innerHTML así. Ya funciona bien todo
    – Rvege
    Commented el 14 jun. 2021 a las 4:32
  • No hay de que!! Commented el 14 jun. 2021 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.