I can see data in a Firebase realtime database from the console but if I try to read this data via HTML/JavaScript it’s not giving me anything. I have tried two different ways; neither worked.
Format of the data:
JavaScript
x
15
15
1
https://pump-a559c-default-rtdb.firebaseio.com/
2
Sensor
3
pump1
4
Cycle:217
5
Duration:4.49222
6
GalsPumped:26953.33203
7
PumpID:1
8
StartTime:"06:09:2022 17:55:39"
9
pump2
10
Cycle:7
11
Duration:0.17806
12
GalsPumped:1068.33325
13
PumpID:2
14
StartTime:"06:09:2022 17:30:03"
15
First way:
JavaScript
1
66
66
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Document</title>
8
<style>
9
body {text-align: center;}
10
#findDetails {float: left; width: 50%; background-color: floralwhite; color: darkslategray;}
11
input {width: 120px;}
12
</style>
13
</head>
14
<body>
15
16
<div id="findDetails">
17
<h1>PUMP1</h1>
18
19
<h3 id="Start-time" type="text"></h3>
20
<h3 id="Cycle" type="text"></h3>
21
<h3 id="Duration-hrs" type="text"></h3>
22
<h3 id="Pumped-gals" type="text"></h3> <br><br>
23
</div>
24
25
<script type="module">
26
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js";
27
import {getDatabase, ref, get, set, child, update, remove} from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js"
28
29
const firebaseConfig = {
30
apiKey: "AIzaSyAKQ4cRyBMBbjhsYpg5w96wVj_-qE4zUGw",
31
authDomain: "pump-a559c.firebaseapp.com",
32
databaseURL: "https://pump-a559c-default-rtdb.firebaseio.com",
33
projectId: "pump-a559c",
34
storageBucket: "pump-a559c.appspot.com",
35
messagingSenderId: "838180391277",
36
appId: "1:838180391277:web:df22c7d634310ae135b264"
37
};
38
39
// Initialize Firebase
40
const app = initializeApp(firebaseConfig);
41
42
// Initialize the database
43
const db = getDatabase(app);
44
45
const dbref = ref(db);
46
47
get(child(dbref, "Sensor"))
48
.then((snapshot)=>{
49
snapshot.forEach((child)=>{
50
Start-time.innerHTML = "Start-time: " + child.val().StartTime;
51
Cycle.innerHTML = "Cycle: " + child.val().Cycle;
52
Duration-hrs.innerHTML = "Duration-hrs: " + child.val().Duration;
53
Pumped-gals.innerHTML = "Pumped-gals: " + child.val().GalsPumped;
54
// console.log(child.val().StartTime);
55
} else {
56
alert("No data found");
57
}
58
})
59
.catch((error)=>{
60
alert(error);
61
});
62
63
</script>
64
</body>
65
</html>
66
Second way:
JavaScript
1
83
83
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Document</title>
8
<style>
9
body {text-align: center;}
10
#findDetails {float: left; width: 50%; background-color: floralwhite; color: darkslategray;}
11
input {width: 120px;}
12
</style>
13
</head>
14
<body>
15
16
<ul id="list">
17
18
</ul>
19
20
<script type="module">
21
// Import the functions you need from the SDKs you need
22
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js";
23
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js";
24
// TODO: Add SDKs for Firebase products that you want to use
25
// https://firebase.google.com/docs/web/setup#available-libraries
26
27
// Your web app's Firebase configuration
28
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
29
const firebaseConfig = {
30
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-qE4zUGw",
31
authDomain: "pump-a559c.firebaseapp.com",
32
databaseURL: "https://pump-a559c-default-rtdb.firebaseio.com",
33
projectId: "pump-a559c",
34
storageBucket: "pump-a559c.appspot.com",
35
messagingSenderId: "838180391277",
36
appId: "1:838180391277:web:df22c7d634310ae135b264",
37
measurementId: "G-K66Z05LFCD"
38
};
39
40
// Initialize Firebase
41
const app = initializeApp(firebaseConfig);
42
43
var pumpId=0;
44
function addItemsToList(starttime,cycle,duration,pumped){
45
var ul=document.getElementById('list');
46
var header= document.createElement('h2');
47
48
var _starttime= document.createElement('li');
49
var _cycle= document.createElement('li');
50
var _duration= document.createElement('li');
51
var _pumped= document.createElement('li');
52
53
_starttime.innerHTML='Start-time: '+starttime;
54
_cycle.innerHTML='Cycle: '+cycle;
55
_duration.innerHTML='Duration-hrs: '+duration;
56
_pumped.innerHTML='Pumped-gals: '+pumped;
57
58
ul.appendChild(header);
59
ul.appendChild(_starttime);
60
ul.appendChild(_duration);
61
ul.appendChild(_pumped);
62
}
63
64
function FetchAllData(){
65
firebase.database().ref('Sensor').once('value',function(snapshot){
66
snapshot.forEach(
67
function(ChildSnapshot){
68
let start = ChildSnapshot.val().StartTime;
69
let cycle = ChildSnapshot.val().Cycle;
70
let duration = ChildSnapshot.val().Duration;
71
let pumped = ChildSnapshot.val().GalsPumped;
72
addItemsToList(start,cycle,duration,pumped);
73
}
74
);
75
});
76
}
77
window.onload(FetchAllData());
78
79
</script>
80
81
</body>
82
</html>
83
Advertisement
Answer
The following code resolved the issue and now I get my sensor data:
JavaScript
1
11
11
1
get(child(dbref, "Sensor"))
2
.then((snapshot)=>{
3
snapshot.forEach((child)=>{
4
id_PumpID.innerHTML = "Pump ID: " + child.val().PumpID
5
id_StartTime.innerHTML = "StartTime: " + child.val().StartTime;
6
id_Cycle.innerHTML = "Cycle: " + child.val().Cycle;
7
id_Duration.innerHTML = "Duration: " + child.val().Duration;
8
id_GalsPumped.innerHTML ="GalsPumped: " + child.val().GalsPumped;
9
})
10
});
11