firebase host 5: query data and showing a json in body

There are ways to search in firebase:
https://firebase.google.com/docs/reference/js/firebase.database.Query

Methods

• endAt
• equalTo
• isEqual
• limitToFirst
• limitToLast
• off
• on
• once
• orderByChild
• orderByKey
• orderByPriority
• orderByValue
• startAt
• toJSON
• toString

I plan to use web to show my sensor data, so the last data and last few data average are useful

and to show the returned val in HTML body, you need to use JSON.stringify

example as below:

<script>

var db = firebase.database();

db.ref("chinese/henry").limitToLast(3).on('value', function (snapshot) {

//db.ref("chinese/henry").limitToFirst(1).once('value', function (snapshot) {

//db.ref("chinese/henry").on('value', function (snapshot) {

var data = snapshot.val();

console.log(data);

console.log(snapshot.key);// it shows henry

document.getElementById("mydata").innerHTML= JSON.stringify(data,null,3);

//document.getElementById("mydata").innerText= JSON.stringify(data,null,3);

});

</script>

<!--this one only show object:object

<h1>"the data is: " <span id="mydata"></span></h1>

-->

<ul id="mydata"></ul>

<!--<script>src="index.js"</script>-->

</body>

</html>

when using limit to last, it search the last one in the database, but in firebase the key are ordered, so if you add a data with key=a, even it's last added one, it would show up when .limitToLast(1) since it's not the last one in the ordered database


document.getElementById("mydata").innerHTML= JSON.stringify(data,null,3);
.
.

<ul id="mydata"></ul>
shows like below





To get a value in a specified key:
when you get JSON from val()

var data = snapshot.val();

just add the .key, like:

console.log(data.grade3);// this will show the value of key"grade3"

or 

document.getElementById("mydata").innerHTML= JSON.stringify(data.grade3,null,3);

it shows like: