Hi rani,
To avoid the error create a ViewModel which is identical to your structure or with required properties and pass the ViewModel to return JsonResult.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class EmployeeModel
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
NorthwindEntities entities = new NorthwindEntities();
var employees = entities.Employees.Select(x => new EmployeeModel
{
EmployeeID = x.EmployeeID,
Name = x.FirstName + " " + x.LastName,
Country = x.Country
}).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
View
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Employees = [];
$http({
method: 'Get',
url: '/Home/GetEmployees/'
}).success(function (response) {
$scope.Employees = response;
}).error(function (response) {
$window.alert(response);
});
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tbody ng-repeat="employee in Employees">
<tr>
<td>{{employee.EmployeeID}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.Country}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
