How to read a firebase Data using HTML5 and Javascript?

Question

When I want to read the data of my Firebase, nothing appears.

I have tried to read the data using a script for this.

This is my HTML code:

<html>
    <head>
        <title>Javascript Firebase</title>
        Humidity: <humidity></humidity><br>
            Clock: <clock></clock><br>
        </head>
        <body>

and this is my script: 

<script type="text/javascript">
        var database = firebase.database('javascript-firebase-6567d');
        var h document.querySelector('humidity');
        var c = document.querySelector('clock');

        var pad = function(x){
        return x < 10 ? '0' +x : x;
        }

        var ShowClock = function() {
        var d = new Date();
        var h = pad(d.getHours());
        var m = pad (d.getMinutes());
        var s = pad (d.getSeconds()); 


        c.innerHTML = [h,m,s].join(':');
        }
        setInterval(ShowClock,1000);

        var myRef = Firebase('https://javascript-firebase-6567d.firebaseio.com/rooms');
        myRef.on('child_changed',function(snapshot){
        data = snapshot.val();
        h.innerHTML = data.humidity;
        });
        </script>

The results that I hope is to see the changes that the child "humidity" shows but currently I can not see the results of the clock or the humidity

It looks like you're using an extremely old version of the Firebase client library. Consider integrating Firebase into your web app using the modern instructions. firebase.google.com/docs/web/setup — Doug Stevenson
– Doug Stevenson, Commented Apr 19, 2019 at 21:16

Frank van Puffelen · Accepted Answer · 2019-04-20 04:11:53Z

1

This code:

 myRef.on('child_changed',function(snapshot){
    data = snapshot.val();
    h.innerHTML = data.humidity;
 });

The child_changed event only fires when the data in the location changes. If you're trying to show the current child nodes under a location, you'll want to use child_added:

 myRef.on('child_added',function(snapshot){
    data = snapshot.val();
    console.log(data);
 });

The child_added fires immediately after attaching the listener for any existing child node, and then subsequently for any new nodes that are added.

answered Apr 20, 2019 at 4:11

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to read a firebase Data using HTML5 and Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related