Firebase将数据从Firebase检索到HTML表中

Question

是否存在从Firebase实时数据库中将节点的所有值检索到html表中的解决方案？ 我想将IOT传感器数据从Firebase显示到html表中？ 每次在湿度中添加新值时，温度都会进入html表的新行吗？ 怎么做的？

 agrismart-c7cb0
 .
 .
     ---  ...Sensor
          ----- .Humidity
                 . -Ll1yRHBqZUSQUpAANYl: "64"
                 . -Ll1ySD9oG5fiia15eL0: "65"
                 . -Ll1yTrQnmS0T1ImusKQ: "68"
                 . -Ll1yVjd3wZi48jp9SB1: "65"
          ----- .Moisture
                 .  -LlQz7gIlHBKWT66T2gS: "96"
                 .  -LlQz80sa4qoOZvOSKPn: "95"
                 .  -LlQz8IlfBnlIy0FQZoM: "99"
                 .  -LlQz83LXAwr3FWqvmbN: "91"
          ----- .Temperature
                 . -Ll1yS8KchaePZcNypBG: "32"
                 . -Ll1yTmE4GM950mbXN0m: "33"
                 . -Ll1yVSn8vZ82UaPraSw: "36"
                 . -Ll1yX42I9gAWVm2B5yA: "38"

我已经试过了这段代码，但是我在HTML表中仅得到一行，它显示的是湿度，温度和湿度节点的最后一个子值。 控制台显示所有值，但它们在HTML表中仅一行。

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

    var database = firebase.database();
    var humElement;
    var MoistElement;
    var tempElement;

    var humRef = database.ref('Sensor').child('Humidity');
    var MoistRef = database.ref('Sensor').child('Moisture');
    var tempRef = database.ref('Sensor').child('Temperature');

    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;
                });

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


}());

我的html表代码：

<table class="content-table" align="center">
<thead>
<tr>
<td >Humidity</td> 
<td >Moisture</td>
<td >Temperature</td>
</tr>
</thead>
<tbody id="tabledata">
</tbody>
</div>

</table>

我的预期结果是：

             Humidity | Moisture   | Temperature
               64     |     96     |    32
               65     |     95     |    33
               68     |     99     |    36 
               65     |     91     |    38  

我找回了什么

      Humidity    | Moisture   | Temperature
         65       |     91     |     38

我在控制台中得到什么：

humidity:64
humidity:65
humidity:68
humidity:65
Moisture:96
Moisture:95
Moisture:99
Moisture:91
temperature:32
temperature:33
temperature:36
temperature:38

谁能告诉我我在做什么错？ 为什么我没有获得最后一个chlid值的所有值instad？ 有谁能解决这个问题。任何解决方案将不胜感激。

Answer 1

如果将数据添加到HTML的行之前添加了额外的log语句，则问题的原因应该变得更加清楚：

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>");
        });
    });
});

如果运行此命令，控制台将记录：

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

这是因为您首先要遍历数据库中的每个快照，然后从每个快照中提取一个值。 然后，一旦遍历所有它们，就可以将每个快照的最后一个值添加到HTML。

由于您具有三个嵌套的读取操作，因此还需要确保对结果数据的循环是嵌套的：

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>");
            });
          });
        });
      });
    });
  });
});

我创建了此更新的JSBin，以显示如何从每个项目中获取最新值并将其显示在表中： https : //jsbin.com/sujuwik/edit?js，输出

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()

如您所见，这使用limitToLast(1)来确保我们仅从每个传感器获取最新的项目，这使得对齐每个传感器的数据变得容易。

如果要显示多行，则需要确定每个传感器的读数与其他传感器的读数相对应，因为每个传感器上的读数数量不同（1312湿度节点，1305湿度节点，1314温度节点）。

例如：您可以还原为使用on(...)而不是once(...) ，在这种情况下，代码将首先添加具有来自每个传感器的最新值的单行，然后在任何时候添加新行的传感器报告新值。