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:
Pero cuando resive datos, esto pasa: (Aquí los ingresé manualmente por la consola de Firebase)
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?