Bootstrap-Table data-url receiving records but not showing data in MVC-CodePudding

When calling a method, GetEmployee in this example, it is correctly showing 2 records but with a dash instead of the data. I'm guessing it is a Json issue in the controller but have been unable to find a solution. Here is a simplified case that I've been prototyping. Thanks in advance!

CONTROLLER

public JsonResult GetEmployees()
{
    List<EmployeeViewModel> employees = new List<EmployeeViewModel>()
    {
        new EmployeeViewModel { EmployeeName = "Steve", PostalCode = "90210" },
        new EmployeeViewModel { EmployeeName = "Jane", PostalCode = "41111" }
    };

    return Json(employees);
}

VIEW

<script type="text/javascript">
$(function () {
    $("#myTable").bootstrapTable({
        url: '/Home/GetEmployees',
        method: 'get',
        pageSize: 10,
        pageNumber: 1,
        pagination: true,
        columns: [
            {
                field: 'EmployeeName',
                title: 'Employee Name',
                sortable: true
            },
            {
                field: 'PostalCode',
                title: 'Postal Code',
                sortable: true
            }
        ]
    });
});
</script>

<div >
<div >
    <table id="myTable"></table>
</div>
</div>

web page

CodePudding user response：

javascript is case sensitive and uses camel case property names. try this

             .....  
           {
                field: 'employeeName',
                title: 'Employee Name',
                sortable: true
            },
            {
                field: 'postalCode',
                title: 'Postal Code',
            ....