vendredi 28 septembre 2018

How do I make my user STUDENT retrieve and display classrooms he/she belong to?

I'm having a difficulty of retrieving and displaying the classes of a student user which he/she belong. In my web app, there are 2 types of user: Teacher and Student

Teacher
- can create and view classrooms

Student
- can join and view classrooms

These codes allows the user Teacher to create and display the classrooms:

  if(userRole.innerHTML == "Teacher"){
      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><span onclick="clickDone(this)">
                                  Students :
                                  </span><ul style="display:none">
                                  <li>'+studentRawList+'</li>
                                  </ul></li></ul>';
                          })
                       })
                     }
                    }

These codes allows the user Student to join a particular classroom but will not display in the html.

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

I tried to use these codes to allow the user Student to view/display the classes he/she joined:

else if(homeRole.innerHTML == "Student"){

var studentClassRef = firebase.database().ref()
                      .child('Classes' + '/' + user.uid);

    studentClassRef.on('child_added', function(data){

      var roomNamess = data.val().TheClass;
      var Studentxx = data.val().MyStudents;
      var classDD = data.val().ClassID;

      var ul2 = document.createElement('ul');
      document.getElementById('myLista').appendChild(ul2);
      var li2 = document.createElement('li');
      ul2.appendChild(li2);


      var studentRawLists= '';
      for (var keys in Studentxx) {
        if(studentxx[keys].Studentname == user.displayName){
          studentRawLists += ('['+Studentxx[keys].Studentname + ']');
      }    
          Object.keys(roomNamess).forEach(function(keyz){
            li2.innerHTML += '<span onclick="clickDone(this)">'
                             +roomNamess[keyz]+'</span>
                             <ul style="display:none">
                             <li>Class Id : '+classDD+'</li>
                             <li><span onclick="clickDone(this)">
                              Students :</span>
                             <ul style="display:none">
                             <li>'+studentRawLists+'</li></ul></li></ul>';

        })


    }
  })

I thought that if I use this line

    for (var keys in Studentxx) {
        if(studentxx[keys].Studentname == user.displayName){
          studentRawLists += ('['+Studentxx[keys].Studentname + ']');
      }  

the names that are match to the user Student name will be stored in the studentRawLists

What went wrong? Are there any alternative way of retrieving and displaying the classrooms for Students?

and the 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"
      }
     }
    }
   }

So if I use the user Sweet Macaroni there should be 2 classrooms displayed in the HTML namely: Classroom Trial and asdasd and only 1 for the user Purple Salad




Aucun commentaire:

Enregistrer un commentaire