I have a html page that have these codes, what this does is it displays the list of employees residing in the database
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
var employeeList = $('#EmployeeList');
$('#DisplayEmp').click(function () {
$.ajax({
type: 'GET',
url: 'api/employees',
dataType: 'json',
success: function (data) {
console.log(data);
employeeList.empty();
$.each(data, function (index,val){
var fullName = val.employee_Name;
employeeList.append('<li>' + fullName + '</li>')
});
}
});
});
});
</script>
</head>
<body>
<input id="DisplayEmp" type="button" value="Display Employees" />
<input id="ClearEmp" type="button" value="Clear Employees" />
<ul id="EmployeeList"></ul>
</body>
</html>
I am new to jquery so I am not really familiar with the codes. But when I ran the program it displays undefined which is I dont have any Idea in its confusing. I checked my codes one by one but still failed to find the problem.
this is my model class
public partial class tblEmployee
{
public int Employee_ID { get; set; }
public string Employee_Name { get; set; }
public string Gender { get; set; }
public Nullable<int> Age { get; set; }
public Nullable<int> Department_ID { get; set; }
public Nullable<int> Salary { get; set; }
}
and I have a controller named Employees when I run the API through URI it displays the list of employees properly.
EDIT 1
Here is the response of the server
EDIT 2 Here is my controller
[HttpGet]
public HttpResponseMessage GetEmployees(string gender = "All")
{
using (EmployeeDBEntities employeeEntity = new EmployeeDBEntities())
{
switch (gender.ToLower())
{
case "all":
return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.ToList());
case "male":
return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
case "female":
return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
default:
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Value for gender must be All,Male or Female" + gender + "is invalid.");
}
}
}
EDIT 3:
Find it weird, as you can see my model class have a property Age so I tried using that property val.Age and it still displays undefined however if I replaced it with val.age notice the lowercase it displays the correct data. But when I tried it with val.Employee_Name to val.employee_name it still displays undefined.
