nested arraylist bind in knockout js

See more:

Knockout.js

This function bind hole catagory but i wont to bind a single catagory subcatagory.

<!-- ko foreach: {data: ParentCatagories ,as :'parent'} -->

<img data-bind="attr:{alt: parent.CategoryName, src: parent.CategoryImage}" />

<!-- ko foreach: {data: $parent.getsubCatagories(parent.CategoryId) ,as: 'child' } -->



<!-- /ko -->







self.cols = ko.observableArray();
self.getsubCatagories = function (obj) {

$.ajax({
url: '/api/Catagory',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: { CatId: obj },
success: function (data) {
alert(data.length);
$.each(data, function (key, value) {
Catagory.CategoryName = value.CategoryName;
Catagory.parentId = value.parentId;
Catagory.PostCount = value.PostCount;
Catagory.CategoryImage = value.CategoryImage;
Catagory.CategoryChangeSource = "City";
Catagory.CategoryId = value.CategoryId;
self.cols.push(value);

});
}
});
return self.cols;
};