After creating a basic ASP.NET WEBApi that retrieves a list of customers, I am attempting to connect it with the UI.
Here is my WEB Api Controller code:
public class DummyController : ApiController
{
public HttpResponseMessage Get()
{
List<Customer> customers = new List<Customer>();
Customer customer = new Customer();
customer.FirstName = "John";
customer.LastName = "Doe";
customers.Add(customer);
customer = new Customer();
customer.FirstName = "Mike";
customer.LastName = "Doobey";
customers.Add(customer);
HttpResponseMessage result = null;
result = Request.CreateResponse(HttpStatusCode.OK, customers);
return result;
}
}
Angular Controller Implementation:
<script type="text/javascript">
function dummyCtrl($scope) {
$.getJSON("http://127.0.0.1:81/Api/dummy", function (resp) {
$scope.dummy = resp;
$scope.json = angular.toJson(resp);
console.log($scope.json);
});
}
</script>
Executing the Angular Controller:
<body ng-controller="dummyCtrl">
<div>
<ul>
<li ng-repeat = "person in dummy">
<span>{{person.FirstName}}</span>
<span>{{person.lastname}}</span>
</li>
</ul>
</div>
</body>
I can view the JSON data using Chrome Dev Tools but I cannot see the output on the browser. What could be the issue?