javascript - 如何制作嵌套列表？

因此，在我尝试制作的网络应用中，有两种类型的用户：教师和学生


  老师
  -可以创建教室
  -可以查看加入他/她教室的学生
  
  学生
  -可以加入老师创建的教室
  -可以查看加入同一个房间的教室和同学


对于老师，我使用以下代码创建了教室：

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" : "[email protected]",
      "status" : "Teacher"
    },
    "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
      "displayName" : "Sweet Macaroni",
      "email" : "[email protected]",
      "status" : "Student"
    },
    "yJif4ReTxCcGmo682xWSG3L5MKE3" : {
      "displayName" : "Purple Salad",
      "email" : "[email protected]",
      "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个用户。紫色沙拉，甜通心粉（均为学生）和名为Dodong Advices的老师。

因此，Dodong Advices有3个教室：StackMates，asdasd和Trial

在StackMates班上，Dodong Advices没有学生，但是在asdasd班上，他有一个叫Sweet Macaroni的学生，在Trial班上有2个学生。

以下代码允许用户Dodong Advices查看他创建的教室。

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

但这没有用。最好的解决方案是什么？我真的需要你的帮助 ：（

最佳答案

通过执行data.val().MyStudents，您将获得一个JavaScript对象。您必须遍历此对象的元素才能列出不同的学生。

获取对象属性的方法有很多，请参见How to get all properties values of a Javascript Object (without knowing the keys)?

例如，您可以简单地执行以下操作

  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（更易于学习，但占地面积更小，功能更弱，恕我直言），