Как сделать вложенный список?

Question

Итак, в веб-приложении, которое я пытаюсь создать, есть два типа пользователей: Учитель и Ученик

Учитель
- Может создавать классные комнаты
- Может просматривать Учащиеся , которые присоединились к его / ее классу / ам

Учащийся
- Может присоединитьсякласс (ы), созданные Учителем
- Можно просматривать класс и одноклассников, которые присоединились к одной комнате

Для Учителя , я использовалэти коды для создания классных комнат:

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

и эти коды для учеников , чтобы присоединиться к классной комнате

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

Эти коды прямо здесь позволяют учителю чтобы просмотреть созданный класс

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

Как выглядит мой JSON

{
  "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"
      }
    }
  }
 }

На основе JSON видно, что у нас 3 пользователя,Фиолетовый салат, сладкие макароны ( оба ученики ) и Учитель по имени Советы Додонга.

Так что у Советов Додонга есть 3 класса: StackMates , asdasd и Trial

В классе StackMates у Dodong Advices нет ученика, но в классе asdasd у него есть один, которого зовут Сладкие макароны, и 2 ученика в классе Испытание

Приведенные ниже коды позволяют пользователю Советы Додонга просматривать созданные им классы.

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

, но не ученики, которые присоединились к одному из его классов.

Изображение выше - результат

Я попытался использовать этот код, чтобы показать список классных комнат и список учеников внутри каждой классной комнаты:

  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>';

Но это не сработало.Каково лучшее решение для этого?Мне очень нужна твоя помощь: (

Answer 1

Делая data.val().MyStudents, вы получаете объект JavaScript.Вы должны перебрать элементы этого объекта, чтобы перечислить разных учеников.

Существует много различных способов получения свойств объекта, см. Как получитьвсе значения свойств объекта Javascript (не зная ключей)?

Например, вы можете просто сделать что-то вроде

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

Это очень элементарно, вы, вероятно, должны работатьв формате строки studentRawList, но он показывает вам один из возможных способов.

---

Кроме того, просто отметьте, что есть несколько структур JavaScript, которые позволят разделить ваш GUI и модель данных (исходя изFirebase) и написать более чистый, более понятный код.Конечно, есть кривая обучения (иногда довольно крутая ...), но, возможно, стоит взглянуть.Например, см. Vue.js, React, Angular или Knockout.js (гораздо проще в изучении, но с меньшими размерами и менее мощными, IMHO),