How to retrieve data from firebase using javascript

Question

I have written a code to enter and save data to firebase. The data is saved perfectly, but now i want to display the same data using javascript on my html page. How do i do it? (P.S I have referred the issue in many places but none of them work for my document. For reference i have put them inside comments in the js file) Following is the javascript file and HTML for reference.

    main.js

     // Initialize Firebase
     var config = {
     apiKey: "AIzaSyC7HkjUoZe0Bj4xAd3up9rMXoMWay8MCpE",
     authDomain: "contactform-9133a.firebaseapp.com",
     databaseURL: "https://contactform-9133a.firebaseio.com",
     projectId: "contactform-9133a",
     storageBucket: "contactform-9133a.appspot.com",
     messagingSenderId: "950534208323"
     };

     firebase.initializeApp(config);

     //ref msg collection (collections are tables)

     var messagesRef = firebase.database().ref('messages');

     // var ref = firebase.database().ref();

     document.getElementById('contactform').addEventListener('submit', 
     submitForm);



     /*var list = document.getElementById('namelist');

       var listRef = friebase.database().ref().child('name');

       listRef.on('value', function(datasnapshot) {
       list.innerHTML = datasnapshot.val();
        });*/

     /*ref.on('value', function(snapshot) {
       console.log(snapshot.val());
        });*/

     //submit form to database
       function submitForm(e) {
       e.preventDefault();

     //get values
       var name = getInputVal('name');
       var address = getInputVal('address');
       var email = getInputVal('email');
       var phone = getInputVal('phone');
       var password = getInputVal('password');

    /*function gotData(name, address, email, phone, password) {
      var n = name.val();
      console.log(n);
     //var keys = Object.keys(messages);
     // console.log(keys);
      }*/

      saveMessage(name, address, email, phone, password);

      //show alert
      document.querySelector('.alert').style.display = 'block';

      //hide alert after three secs
      setTimeout(function() {
      document.querySelector('.alert').style.display = 'none';
        }, 3000);


      document.getElementById('contactform').reset();

      }

      //function to get form values

      function getInputVal(id) {
      return document.getElementById(id).value;
       }

      function saveMessage(name, address, email, phone, password) {
      var newMessageRef = messagesRef.push();
      newMessageRef.set({
      name: name,
      address: address,
      email: email,
      phone: phone,
      password: password
       });
     //var hot = newMessageRef.val();
     //var keys = Object.keys(hot);



      /* for (var i = 0; i < keys.length; i++) {
         var k = keys[i];
         var name1 = hot[k].name;
         console.log(name1);
      //var li = document.createElement('li', name);

      //li.parent('namelist');
      }*/

     }



    index.html

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Comaptible" content="ie=edge">
      <title>Medi Aid</title>
      <link href="https://maxcdn.bootstrapcdn.com/font-
        awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
        integrity="sha384-
        wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
        crossorigin="anonymous">

      <link rel="stylesheet" type="text/css" href="style.css">
      </head>

      <body>
       <div class="container">
        <h1 class="brand"><span>Medi Aid</span></h1>
         <div class="wrapper animated bounceInLeft">
          <div class="our-info">
            <h3>Medi Aid</h3>
            <ul>
                <li><i class="fa fa-road"></i> SRM IST</li>
                <li><i class="fa fa-phone"></i> Ph-no:000 000</li>
                <li><i class="fa fa-envelope"></i> Email</li>
            </ul>
          </div>
         <div class="contact">
            <h3>Email Us</h3>
            <!--To do validation -->
            <div class="alert">You have been signed up</div>
            <form id="contactform">
                <p>
                    <label>Name</label>
                    <input type="text" name="name" id="name" required>
                </p>
                <p>
                    <label>Address</label>
                    <input type="text" name="address" id="address" required>
                </p>
                <p>
                    <label>Email Address</label>
                    <input type="email" name="email" id="email" required>
                </p>
                <p>
                    <label>Phone Number</label>
                    <input type="text" name="phone" id="phone">
                </p>
                <p class="full">
                    <label>Password</label>
                    <input type="password" name="password" id="password" 
                     required>
                </p>
                <p class="full">
                    <button type="submit">Submit</button>
                </p>
            </form>
         </div>
        </div>
       </div>
      <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js">
      </script>
      <script 
       src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js">
      </script>
      <script src="main.js"></script>
     </body>

    </html>

I also tried the below stuff, but it's still not working:

    main.js(contd.)

    messagesRef.once("value").then(function(snapshot) {
     snapshot.forEach(function(childSnapshot) {
         var key = childSnapshot.key;
         var childData = childSnapshot.val();


         var name_val = childSnapshot.val().name;
         console.log(name_val);

         // $("#namelist").append(name_val);

         $("#namelist").append("<p>" + name_val + "</p>");


       });
      });

Ronnie Smith · Accepted Answer · 2018-02-09 03:32:17Z

1

Try this.

ref.child('your-node').child('your-node').once('value').then(function(snap) {
    if(snap.val()){
        //do your thing here.
        console.log(snap.val());
    }
}, function(error) {
    // The Promise was rejected.
    console.log('Error: ',error);
});

answered Feb 9, 2018 at 3:32

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

How to retrieve data from firebase using 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