How to get Json result in to the table using angularJs

Viewed 54

I'm trying to retrieve whole table in mvc5 using angularJS. Data in Json result is being displayed but not in the table as I wanted.

I'm using mvc5 and angularjs(1.x) to retrive the data from sql server

Here's the Data Access Layer code:

public List<Employee> ShowAllEmployee()
        {
            List<Employee> prdList = userdb.Employees.ToList();
            return prdList;
        }

Here's the HomeController method:

 public JsonResult AllEmployee()
        {
            repo = new Employee_DAL.EmpRepo();
            var hotList = repo.ShowAllEmployee();
            List<Models.Employee> mList = new List<Models.Employee>();
            foreach (var hotl in hotList)
            {
                Models.Employee hotLocal = new Models.Employee();
                hotLocal.EmployeeId = hotl.EmployeeId;
                hotLocal.FirstName = hotl.FirstName;
                hotLocal.LastName = hotl.LastName;
                hotLocal.Designation = hotl.Designation;
                //hotLocal.Description = hotl.Description;
                hotLocal.Country = hotl.Country;
                hotLocal.Gender = hotl.Gender;
                //hotLocal.Rating = hotl.Rating;
                //hotLocal.Email = hotl.Email;
                mList.Add(hotLocal);
            }
            return Json(mList, JsonRequestBehavior.AllowGet);
        }

Here's the script ( angular) code:

var myApp = angular.module('MyModule', []);
myApp.controller('DBcontroller', function ($scope, $http) {
    $http.get('/Home/AllEmployee') // added an '/' along with deleting Controller portion
        .then(function (response) {
            $scope.students = response.data
        })
})

Here's my view(cshtml):

@{
    Layout = null;
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Customs/angular.min.js"></script>
    <script src="~/Customs/Scripts.js"></script>
    <title>AllEmployee</title>
</head>
<body ng-app="myApp">

    <div ng-controller="DBcontroller">

        <table class="table-bordered">

            <tr>

                <th>Emp No</th>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Designation</th>

                <th>Country</th>

                <th>Gender</th>

            </tr>

            <tr ng-repeat="e in students" @*ng-class-even="'even'" ng-class-odd="'odd'"*@>

                <td>{{e.EmployeeId}}</td>

                <td>{{e.FirstName}}</td>

                <td>{{e.LastName}}</td>

                <td>{{e.Designation}}</td>

                <td>{{e.Country}}</td>

                <td>{{e.Gender}}</td>

            </tr>

        </table>

    </div>



</body>
</html>

I expect the jsonresult to be displayed in a table. Not directly like this in the browser.Screenshot of my current output

0 Answers
Related