Knock out foreach binding from object array - html

Question

I am new in knockout. I want to make the list of students.
I have attached the list structure which returned from MVC as an image, Click here to view.
Js code:
var employeeListViewModel = {};
var employeeViewModel = {
id: "",
name: ko.observable("neenu"),
age: ko.observable(),
email: ko.observable(),
department: ko.observable(),
address: {
address1: ko.observable(),
city: ko.observable(),
State: ko.observable()
},
};
var employeePageViewModel = {
employee: employeeViewModel,
employees: employeeListViewModel
};
var dataSource = {
getemployees: function () {
getData("Employee/GetEmployees").then((data) => {
var result = ko.mapping.fromJS(data.data);
employeeListViewModel = result();
console.log(employeeListViewModel);
});
},
init: function () {
this.getemployees();
}
}.init();
ko.applyBindings(employeePageViewModel);
Html code:
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: employees">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Id"></td>
</tr>
</tbody>
When I run this page ,It is neither displaying any error nor displaying data. Please help.

Answer 1

1) employeeListViewModel must be a ko.observableArray()
2) also when getting the result from your getData function just set the observableArray to the list:
employeeListViewModel(data.data); //assuming data.data is a [].
3) ko.mapping.fromJS(data.data); can be removed