Firebase将数据从Firebase检索到HTML表中 [英] Firebase retrieve data from firebase into Html Table
问题描述
是否有一种解决方案，可将节点的所有值从Firebase实时数据库检索到html表中?我想将IOT传感器数据从Firebase显示到html表中?每次在湿度中添加新值时，温度都会进入html表中的新行吗?怎么做?
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? Every time when new value is added in humidity,Tempeature it goes into a new row in html table? How it is done?
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表中仅一行.
I have tried this code but i am getting only one row in HTML table, and it is displaying last child value of humidity, temperature, and moisture node. Console is showing all values but their is only one row in HTML table.
(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
我在控制台中得到什么:
What i am getting In console:
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?有谁能解决这个问题.任何解决方案将不胜感激.
Could anyone tell me what i am doing wrong? Why i am not getting all values instad of last chlid value? Does anyone solve that problem.Any solution would be greatly appreciated.
推荐答案
如果在将数据添加到HTML的行之前添加额外的log语句，则问题的原因应该变得更加清楚.
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
这是因为您首先要遍历数据库中的每个快照，然后从每个快照中提取一个值.然后，当您遍历所有快照后，就可以将每个快照的最后一个值添加到HTML中.
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>");
});
});
});
});
});
});
});
我创建了此更新的JSBin，以显示如何从每个项目中获取最新值并将其显示在表中:
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()
如您所见，它使用limitToLast(1)来确保我们仅从每个传感器获取最新的项目，这使得对齐每个传感器的数据变得容易.
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.
如果要显示多行，则需要弄清楚每个传感器的读数与其他传感器的读数相对应，因为每个传感器上的读数数量不同(1312湿度节点，1305湿度)节点，1314个温度节点).
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).
例如:您可以还原为使用on(...)而不是once(...)，在这种情况下，代码将首先添加具有每个传感器的最新值的单行，然后在任何传感器使用时添加新行报告一个新值.
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.
这篇关于Firebase将数据从Firebase检索到HTML表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
