Emibrown Emibrown - 3 months ago 11
Node.js Question

How to use mongodb node.js and angular js to create a course registration portal

I try creating a course registration portal, everything was working correctly but when i try to create a button where student can click to register their courses it was not working here are my codes

FIRST I CREATE A STUDENT SCHEMA
var studentSchema = new Schema({
firstname:{type: String, required: true},
middlename:{type: String, required: true},
lastname:{type: String, required: true},
department:{ type: Schema.Types.ObjectId, ref: 'department', required: true },
Courses:[{type: Schema.Types.ObjectId, ref: 'course'}],
});


The student schema has a sub-document Courses which is an array of courseSchema

var courseSchema = new Schema({
title: {type: String, required: true},
code:{type: String, required: true, unique: true},
unit:{type: String, required: true},
level:{type: String, required: true},
department:{type: Schema.Types.ObjectId, ref: 'department'}
});


I also create an API to get all the courses in mongodb where student.department is equal to course.department here is the code

router.get('/student/getcourses/:studentid', function(req, res){
if (!req.params.studentid) {
sendJSONresponse(res, 404, {
"message": "Not found, studentid is required"
});
return;
}
Student
.findOne({_id : req.params.studentid})
.exec(function(err, student){
if (err) {
sendJSONresponse(res, 404, err);
}else{
Course
.find({department : student.department})
.populate('department')
.exec(function(err, courses){
if (err) {
sendJSONresponse(res, 404, err);
}else{
sendJSONresponse(res, 200, courses);
}
});
}
});
});


I also create an API that will register a particular course for a student here is the code

router.post('/student/courseReg/:studentid', function(req, res){
if (!req.params.studentid) {
sendJSONresponse(res, 404, {
"message": "Not found, studentid is required"
});
return;
}
Student
.findByIdAndUpdate(req.params.studentid, {$push: {regCourses:req.body.course}})
.exec(function(err, student){
if (err) {
sendJSONresponse(res, 404, err);
}else{
sendJSONresponse(res, 200, " registration successfull");
}
});
});


on the front-end with angularjs here is what i did

$http.get('/api/student/getcourses/' + $scope.studentid)
.success(function(data) {
$scope.courses = data ;
$scope.register = function(course){
$http.post('/api/student/courseReg/' + $scope.studentid, course)
.success(function(data){
console.log(data);
});
};
})
.error(function (e) {
return e;
});


and here is the html code

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Code</th>
<th>Department</th>
<th>level</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="course in courses | filter: adminfilter">
<td>{{course.name}}</td>
<td>{{course.code}}</td>
<td>{{course.department.name}}</td>
<td>{{course.level}}</td>
<td>
<button ng-click="register({{course._id}})" class="btn btn-info btn-xs">Register</button>
</td>
</tr>
</tbody>
</table>
</div


and here is the output
Outout

everything works well but when the register button is been clicked nothing happens. please can anybody help me is they anything i have done wrongly?

output

Answer

If you want to call register() method on the $scope, then declaration should be like this.
HTML code

       <tbody> 
             <tr ng-repeat="course in courses |  filter: adminfilter"> 
                 <td>{{course.name}}</td> 
                 <td>{{course.code}}</td> 
                 <td>{{course.department.name}}</td> 
                 <td>{{course.level}}</td> 
                 <td>
                    <button  ng-click="register(course._id)"  class="btn btn-info btn-xs">Register</button>
                 </td>                      
               </tr> 
         </tbody>

my.controller.js

  angular.module('myapp').controller('myController', function($scope,$http){

  $scope.studentid = ....

  $http.get('/api/student/getcourses/' + $scope.studentid)
   .success(function(data) {
      $scope.courses = data ; 
   })
  .error(function (e) {
    return e;
  });

  $scope.register = function(course){
        $http.post('/api/student/courseReg/' + $scope.studentid, {course:course}) //watch out *data* field of $http,  it can be either string or an object
        .success(function(data){
            console.log(data);
        });
    };
  });
Comments