Knockoutjs one to many mapping not working - asp.net-mvc

Question

In this following code snippet I am creating parent child view model using knockoutjs mapping plugin.I am not getting any error in mapping But when I am running the application it's throwing the error name is not defined.
data = {
"Id": 1,
"Name": "Microsoft",
"Address": "USA",
"WebPage": "SS",
"Employees": [
{
"Id": 1,
"FirstName": "sadsasa",
"LastName": "ADF",
"Twitter": "dfd",
"WebPage": "sdfdf"
},
{
"Id": 2,
"FirstName": "sadsasa",
"LastName": "ADF",
"Twitter": "dfd",
"WebPage": "sdfs"
},
{
"Id": 3,
"FirstName": "sadsasa",
"LastName": "ADF",
"Twitter": "dfd",
"WebPage": "sfdfs"
}
]
};
var mapping = {
'Employees': {
create: function (options) {
alert(options);
return new PersonViewModel(options.data);
}
}
}
function PersonViewModel(data) {
ko.mapping.fromJS(data);
}
function CompanyViewModel(data) {
ko.mapping.fromJS(data, mapping, this);
}
var company;
$(document).ready(function () {
$.ajax({
url: '/api/Greet',
type: 'GET',
dataType: 'json',
success: function (result) {
data = JSON.stringify(result);
company = new CompanyViewModel(data);
console.log(company);
ko.applyBindings(company);
},
error: function (e) {
alert(e);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
FirstName: <span data-bind="text:Name"></span>
</div>

Answer 1

Well you need to do some small modifications in your code .
View Model :
function PersonViewModel(data) {
ko.mapping.fromJS(data,mapping,this);
}
function CompanyViewModel(data) {
self.childlist=ko.observableArray();
ko.mapping.fromJS(data, mapping, this);
self.childlist.push(new PersonViewModel()); //child array
}
View :
<div>
<b>FirstName:</b> <span data-bind="text:Name"></span>
<div data-bind="foreach:Employees">
<span data-bind="text:Id"></span>
</div>
</div>
Working fiddle here
Do let me know incase of any issues .