How to make a nested List?

Question

So in the web app I'm trying to make, there are two types of users: Teacher and Student

Teacher
- Can create classrooms
- Can view Students who joined his/her classroom/s

Student
- Can join a classroom/s created by a Teacher
- Can view the classroom and classmates who joined the same room

For the Teacher, I used these codes to create classrooms :

function classcreation(q)
{
    var usuid = generateId();
    var myClasses={};
    myClasses.TheClass = document.getElementById('classroomName').value;
    myClasses.Teacher = user.displayName;
    myClasses.TeacherID = user.uid;
    myClasses.ClassID = usuid;
    fbclass.child(user.uid).push().set(myClasses);
}

and these codes for Students to join a classroom

function addclass(){
       var addclassID = document.getElementById("classroomID").value;
       var teacherUID =document.getElementById("teachID").value;
       var studentUID = user.uid;
       var studentName = user.displayName;
       var classRef = 
           firebase.database().ref().child('Classes').child(teacherUID);

           classRef.orderByChild("ClassID").equalTo(addclassID)
           .once("child_added", function(snapshot) {
            var studentsRef = snapshot.ref.child("MyStudents");
            studentsRef.child(studentUID).set({ Studentname: studentName });
       });

These codes right here allows the Teacher to view his/her created classroom

  var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
        userRef.on('child_added', function(data)
        {
              var roomNames = data.val().TheClass;
              var Studentx = data.val().MyStudents;
              var classD = data.val().ClassID;
              var ul = document.createElement('ul');
              document.getElementById('myList').appendChild(ul);
              var li = document.createElement('li');
              ul.appendChild(li);

              Object.keys(roomNames).forEach(function(key){
              li.innerHTML += '<span onclick="clickDone(this)">'
                              +roomNames[key]+'</span>
                              <ul style="display:none">
                              <li>Class Id : '+classD+'</li>
                              <li>Students : '+Studentx+'</li></ul>';
                });
              });

What my JSON looks like

{
  "Accounts" : {
    "FykyhzEZjndylFj3BbCnPqoTGDo1" : {
      "displayName" : "Dodong Advices",
      "email" : "advicenidodong@gmail.com",
      "status" : "Teacher"
    },
    "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
      "displayName" : "Sweet Macaroni",
      "email" : "Sweet@gmail.com",
      "status" : "Student"
    },
    "yJif4ReTxCcGmo682xWSG3L5MKE3" : {
      "displayName" : "Purple Salad",
      "email" : "Purple@gmail.com",
      "status" : "Student"
    }
  },
  "Classes" : {
    "FykyhzEZjndylFj3BbCnPqoTGDo1" : {
      "-LMpvlBl3mEazhxaJwqb" : {
        "ClassID" : "6503-3503-6827",
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "StackMates"
      },
      "-LMrfIBg8v-hj1k8X2Qf" : {
        "ClassID" : "7583-2402-2757",
        "MyStudents" : {
          "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
            "Studentname" : "Sweet Macaroni"
          }
        },
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "asdasd"
      },
      "-LMrfMV1aw3YNA0PfooR" : {
        "ClassID" : "8083-2712-3347",
        "MyStudents" : {
          "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
            "Studentname" : "Sweet Macaroni"
          },
          "yJif4ReTxCcGmo682xWSG3L5MKE3" : {
            "Studentname" : "Purple Salad"
          }
        },
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "Trial"
      }
    }
  }
 }

Based on the JSON we can see that we have 3 users. Purple Salad, Sweet Macaroni (both are students) and a Teacher named Dodong Advices.

So Dodong Advices have 3 classrooms: StackMates, asdasd and Trial

In the class StackMates, Dodong Advices doesn't have a student but in the class asdasd he has one, named Sweet Macaroni and 2 students in the class Trial

The codes below allows user Dodong Advices to view the classrooms he created.

  li.innerHTML += '<span onclick="clickDone(this)">
                  '+roomNames[key]+'</span> 
                   <ul style="display:none">
                   <li>Class Id : '+classD+'</li>
                   <li>Students : '+Studentx+'</li></ul>';

but not the students who joined one of his classrooms.

The image above is the result

I tried using this code to show the list of classrooms and the list of students inside each classrooms:

  li.innerHTML +='<span onclick="clickDone(this)">'+roomNames[key]+'</span> 
                   <ul style="display:none"><li>Class Id : '+classD+'</li> 
                   <li><span onclick="clickDone(this)">Students : </span>
                   <ul style="display:none"><li>'+Studentx[key]+' </li></li> 
                   </ul>';

But it didn't worked. What is the best solution for this? I really need your help :(

Renaud Tarnec · Accepted Answer · 2018-09-25T20:13:01.517

By doing data.val().MyStudents you get a JavaScript object. You have to loop over the elements of this object in order to list the different Students.

There are many different ways for getting the properties of an object, see How to get all properties values of a Javascript Object (without knowing the keys)?

For example, you could simply do something like

  var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
        userRef.on('child_added', function(data)
        {
              var roomNames = data.val().TheClass;
              var Studentx = data.val().MyStudents;

              var studentRawList = '';
              for (var key in Studentx) {
                  studentRawList += (Studentx[key].Studentname + '/');
              }

              var classD = data.val().ClassID;
              var ul = document.createElement('ul');
              document.getElementById('myList').appendChild(ul);
              var li = document.createElement('li');
              ul.appendChild(li);

              Object.keys(roomNames).forEach(function(key){
              li.innerHTML += '<span onclick="clickDone(this)">'
                              +roomNames[key]+'</span>
                              <ul style="display:none">
                              <li>Class Id : '+classD+'</li>
                              <li>Students : '+studentRawList+'</li></ul>';
                });
              });

This is very rudimentary, you should probably work on the format of the studentRawList string, but it shows you one possible way.

In addition just note that there are several JavaScript frameworks that would allow separating your GUI and your data model (coming from Firebase) and write a cleaner, more maintainable, code. Of course there is a learning curve (sometimes quite a steep one...), but it may worth having a look. For example, see Vue.js, React, Angular or Knockout.js (much easier to learn but with a smaller footprint and less powerful, IMHO),

Thank you so much for that mr. renaud. I’m going to try it later. It’s almost 4 in the morning here. — Dodong Advices, Sep 25 '18 at 19:57
Btw, do i need to add something in the code or just copy and paste it? — Dodong Advices, Sep 25 '18 at 19:57
Just copy/paste but, as I said, you will need to fine tune (format the string, check for possible undefined values of Studentx, etc.) It's up to you now! And good night :-) — Renaud Tarnec, Sep 25 '18 at 20:00
It worked sir! Will I still use the same process if I want a Student to view or see the classes he/she joined and also his/her classmates? — Dodong Advices, Sep 26 '18 at 03:21

How to make a nested List?

1 Answers1