title: Display data from Firebase database in a HTML page
body: <p>I am new to Firebase and JS.
  I am trying to display some user information on a web-page that is stored in Firebase database.</p>
  
  <p>Data format is something as this image:</p>
  
  <p><img src="https://i.stack.imgur.com/40OKy.png" alt="Click here for image"></p>
  
  <p><strong>Based on the image above :</strong> <br>
  From the available nodes, UserData is the one that holds the name, email, assigned-id</p>
  
  <p>I don't require to show User1/User2/User3, they are unreadable such as <code>HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35</code>.</p>
  
  <p>I just need the Values associated with Attr1 and Attr3 for all the users there exists.</p>
  
  <p>Now, I would like to fetch this data and show it in a webpage(one of HTML) in a tabular format.</p>
  
  <p>Name | Assigned ID<br>
  ___________________<br>
  Name 1&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp; ID 1<br>
  Name 1&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp; ID 2<br>
  Name 3&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp; ID 3<br><br></p>
  
  <p>I have seen some tutorials but they weren't clear and helpful.</p>
  
  <p>This is the Javascript code I have written basis some tutorials, and only one record is being displayed from the database, rather than whole -
  Also this is the last record available in the database, can i display the same in the sorted order of AssignedID value</p>
  
  <pre><code> (function(){
  // Initialize Firebase
  var config = {
      apiKey: "Aaasff34eaADASDAS334444qSDASD23ASg5H",
      authDomain: "APP_NAME.firebaseapp.com",
      databaseURL: "https://APP_NAME.firebaseio.com",
      storageBucket: "APP-NAME.appspot.com",
      messagingSenderId: "51965125444878"
  };
  firebase.initializeApp(config);
  
  var userDataRef = firebase.database().ref("UserData").orderByKey();
  userDataRef.once("value")
    .then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;
        var childData = childSnapshot.val();              // childData will be the actual contents of the child
  
        var name_val = childSnapshot.val().Name;
        var id_val = childSnapshot.val().AssignedID;
        document.getElementById("name").innerHTML = name_val;
        document.getElementById("id").innerHTML = id_val;
    });
   });
  }());
  </code></pre>
  
  <p>Can someone kindly help me achieve this? Thanks in advance.</p>