如何制作嵌套列表?

时间:2018-09-25 12:57:42

标签: javascript firebase web firebase-realtime-database

因此,在我要制作的网络应用中,有两种类型的用户:教师学生

  

老师
  -可以创建教室
  -可以查看加入他/她教室的学生      

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

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

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个用户。紫色沙拉,甜通心粉(均为学生)和名为“ Dodong Advices”的老师

所以Dodong咨询中心有3个教室: StackMates asdasd 试用

StackMates 班上,Dodong Advices没有学生,但是在 asdasd 班上,他有一名叫Sweet Macaroni的学生和两名在试用

下面的代码允许用户 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>';

但不是参加他的一个教室的学生。

上面的图片是结果 result

我尝试使用此代码显示教室列表和每个教室内的学生列表:

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

但是没有用。最好的解决方案是什么?我真的需要您的帮助:(

1 个答案:

答案 0 :(得分:1)

通过执行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(更容易学习,但占用空间较小,功能更差,恕我直言),