Prateek:

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          var k = keys[i];
         var name1 = hot[k].name;
         console.log(name1);
      //var li = document.createElement('li', name);

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

     }



    index.html









        integrity="sha384-
        wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
        crossorigin="anonymous">






Medi Aid



Medi Aid


 SRM IST

 Ph-no:000 000

 Email




Email Us


You have been signed up



Name



Address



Email Address



Phone Number



Password
                     required>


Submit

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("
" + name_val + "
");


       });
      });