Within my stucontrollers.j, I have the following code:
/// <reference path="../angular.js" />
var stucontrollers = angular.module("stucontrollers", []);
stucontrollers.controller("GetStudentsList",
function GetStudentsList($scope, $http) {
$http({
method: 'GET',
url: '/api/students'
}).then(function(data) {
$scope.students = data;
});
});
Additionally, in my view, I've included this:
<div ng-app="StudentApp">
<div ng-controller="GetStudentsList">
<table>
<thead>
<tr>
<th>Id</th>
<th>FistName</th>
<th>LastName</th>
<th>Age</th>
<th>Gender </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in students">
<td>{{item.Id}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
</tr>
</tbody>
</table>
</div>
</div>
In my app.js, you'll find the following code:
/// <reference path="../angular.js" />
var module = angular.module("StudentApp", ["stucontrollers"]);
Lastly, my StudentsController.cs has the following snippet:
// GET: api/Students
public IQueryable<Student> GetStudents()
{
return db.Students;
}
I'm facing an issue where the list of students only appears in the response of the page inspector and not on the actual page. Any suggestions on what could be causing this? Thank you.
UPDATE I can now view my data in the console, however, it still doesn't display on the page. Below is the data displayed in the console:
data
:
Array(2)
0
:
{Id: 1, FirstName: "Juan", LastName: "Dela Cruz", Age: 25, Gender: "Male"}
1
:
{Id: 2, FirstName: "Maria ", LastName: "Makiling", Age: 30, Gender: "Female"}