Firebase 将数据从 firebase 检索到 Html 表中

Question

是否有将节点的所有值从 firebase 实时数据库中检索到 html 表中的解决方案？我想将物联网传感器数据从 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 值？有没有人解决这个问题。任何解决方案将不胜感激。

Answer 1

如果您在将数据添加到 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>");
        });
    });
});

如果你运行这个，控制台会记录：

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

如您所见，这使用limitToLast(1) 来确保我们只从每个传感器获取最新项目，这样可以轻松对齐来自每个传感器的数据。

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

例如：您可以恢复使用on(...) 而不是once(...)，在这种情况下，代码将首先添加一行，其中包含来自每个传感器的最新值，然后在任何传感器时添加一个新行报告一个新值。