Firebase retrieve data from firebase into Html Table

Question

Is there a solution for retrieving all the values of a node from firebase real time database into html table ? I want to show iot sensor data into html table from firebase? Ever

Answer 1

The reason for the problem should become a lot clearer if you add an extra log statement before the line where you add the data to the HTML:

humRef.on("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        var childData1 = childSnapshot.val();
        console.log("humidity: " + childData1);
        humElement = childData1;
    });


    MoistRef.on('value', function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
            var childData2 = childSnapshot.val();
            console.log("Moisture: " + childData2);
            MoistElement = childData2;

        });

        tempRef.on('value', function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
                var childData3 = childSnapshot.val();
                console.log("temperature: " + childData3);
                tempElement = childData3;
            });

            console.log("Adding "+humElement+", "+MoistElement+", "+tempElement+" to table");
            $("#tabledata").append("<tr><td>" + humElement + "</td><td>" + MoistElement +
                "</td><td>" + tempElement + "</td></tr>");
        });
    });
});

If you run this, the console will log:

humidity:64
humidity:65
humidity:68
humidity:65
Moisture:96
Moisture:95
Moisture:99
Moisture:91
temperature:32
temperature:33
temperature:36
temperature:38
Adding 65, 91, 38 to table

This is because you're first looping over each snapshot from the database, and extract a single value from each. Then once you've looped over all of them, you add the last value from each snapshot to the HTML.

Since you have three nested read operations, you also need to make sure the loops over the resulting data are nested:

humRef.once("value", function(snapshot) {
  MoistRef.once("value", function(snapshot2) {
    tempRef.once("value", function(snapshot3) {
      snapshot.forEach(function(childSnapshot) {
        humElement = childSnapshot.val();

        snapshot2.forEach(function(childSnapshot2) {
          MoistElement = childSnapshot2.val();

          snapshot3.forEach(function(childSnapshot3) {
            tempElement = childSnapshot3.val();

            $("#tabledata").append("<tr><td>" + humElement + "</td><td>" + MoistElement +
                "</td><td>" + tempElement + "</td></tr>");
            });
          });
        });
      });
    });
  });
});

I created this updated JSBin to show how to get the latest value from each item and show it in the table: https://jsbin.com/sujuwik/edit?js,output

var dataHtml = '';
var tableBody = document.getElementById('tabledata');

var database = firebase.database();

var humRef = database.ref('Sensor').child('Humidity');
var moistRef = database.ref('Sensor').child('Moisture');
var tempRef = database.ref('Sensor').child('Tempratue');

humRef.limitToLast(1).once("value", function(snapshot) {
  moistRef.limitToLast(1).once("value", function(snapshot2) {
    tempRef.limitToLast(1).once("value", function(snapshot3) {
      snapshot.forEach(function(childSnapshot) {
        humElement = childSnapshot.val();
        snapshot2.forEach(function(childSnapshot2) {
          MoistElement = childSnapshot2.val();
          snapshot3.forEach(function(childSnapshot3) {
            tempElement = childSnapshot3.val();

            $("#tabledata").append("<tr><td>" + humElement + "</td><td>" + MoistElement +
                "</td><td>" + tempElement + "</td></tr>");
          }); // snapshot3.forEach
        }); // snapshot2.forEach
      }); // snapshot.forEach
    }); // tempRef...once()
  }); // moistRef...once()
}); // humRef...once()

As you can see, this uses limitToLast(1) to ensure we only get the latest item from each sensor, which makes it easy to align the data from each sensor.

If you want to show multiple rows, you'll need to figure out what reading from each sensor corresponds to what reading from the other sensors, since you have a different number of readings on each sensor (1312 humidity nodes, 1305 moisture nodes, 1314 temperature nodes).

For example: you could revert to using on(...) instead of once(...), in which case the code will add a single row initially with the latest value from each sensor, and then add a new row whenever any of the sensors reports a new value.