Display data from Firebase database in a HTML page

Question

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.

Data format is something as this image:

Based on the image above :
From the available nodes, UserData is the one that holds the name, email, assigned-id

I don't require to show User1/User2/User3, they are unreadable such as HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.

I just need the Values associated with Attr1 and Attr3 for all the users there exists.

Now, I would like to fetch this data and show it in a webpage(one of HTML) in a tabular format.

Name | Assigned ID
___________________
Name 1   |    ID 1
Name 1   |    ID 2
Name 3   |    ID 3

I have seen some tutorials but they weren't clear and helpful.

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

 (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;
  });
 });
}());

Can someone kindly help me achieve this? Thanks in advance.

Answer 1

There are two things you need to change 1. instead of using get element by id use jquery and also so that it doesn't overwrite itself use append to list the select items from the database.

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();              

  var name_val = childSnapshot.val().Name;
  var id_val = childSnapshot.val().AssignedID;

  $("#name").append(name_val);
  $("#id").append(id_val);

  });
});

This on its own would output your database items one after the other and so to add formatting to every database item you can do things like this (by the way this is why you have to use jquery as this didn't work with the normal js stuff)...

$("#name").append("<p>" + name_val + "</p><p> " + id_val + "</p>
<br>");

This would look like this for every name and id

Name Id

Name Id

Name Id

You could also have used this for entering you data from your database into a table by putting each item in a tag and so on if you don't know what im on about just go learn about html tables and from then on its self-explanatory.

Answer 2

The reason you are only seeing the last item is because of these 2 lines

 document.getElementById("name").innerHTML = name_val;
 document.getElementById("id").innerHTML = id_val;

You're not creating new items, just writing/overwriting in the same spot. Each item replaces the name/id of the one before until the last item. Consider using element.appendChild() to add the items to an <li> element.

As far as sorting goes, check out this page of the firebase doc: https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

Hope this helps!