代码之家 › 专栏 › 技术社区 › Dodong Advices

如何制作嵌套列表?

firebase-realtime-database web firebase javascript

Dodong Advices · 技术社区 · 7 年前

因此,在我尝试制作的web应用程序中,有两种类型的用户: 教师和

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

-可以加入由教师
-可以看到教室和同学们加入了同一个房间

,我用这些代码创建教室:

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

什么我的

{
  "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个用户。紫色沙拉,甜通心粉( 两人都是学生 教师叫多东。

堆叠伙伴 阿斯达斯德 和审判

在班上 堆叠伙伴 阿斯达斯德 审判

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

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

但没用。最好的解决办法是什么?我真的需要你的帮助:(

1 回复 | 直到 7 年前

Renaud Tarnec 7 年前

通过做 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(易学多了,但占用空间更小,功能更弱,IMHO),