Binding Asp.Net MVC json result to knockout.js observable Array - asp.net-mvc

Question

I have some hardcoded values in my asp.net mvc controller. The GetPlanList() returns a JsonResult which is supposed to be read in by the viewmodel.js file and assign it to the ko.observableArray() and then data bind it to the table.
The problem I am having is how do i get the results from the mvc controller and assign it to the knockout variables?
MVC Controller:
public JsonResult GetPlanList()
{
List<PlanVm> PlanList = GetPlansListData();
return Json(PlanList, JsonRequestBehavior.AllowGet);
}
public List<PlanVm> GetPlansListData()
{
return new List<PlanVm>()
{
new PlanVm() { PlanName = "706-1", ActiveParticipants = 414, TotalOfAllParticipantShares = 1.22},
new PlanVm() { PlanName = "706-2", ActiveParticipants = 23423, TotalOfAllParticipantShares = 4.00},
new PlanVm() { PlanName = "706-3", ActiveParticipants = 3, TotalOfAllParticipantShares = 564.00},
new PlanVm() { PlanName = "706-4", ActiveParticipants = 123, TotalOfAllParticipantShares = 0.00}
};
}
viewmodel.js file:
function IssuePlansViewModel() {
var self = this;
self.planName = ko.observable("");
self.numberOfParticipants = ko.observable("");
self.totalShares = ko.observable("");
self.result = ko.observableArray();
return self;
}
return IssuePlansViewModel;
HTML:
<table class="table">
<thead>
<tr>
<td>Plan Name</td>
<td class="hide-mobile txt-right">Number of Participants</td>
<td class="txt-right">Total Shares</td>
</tr>
</thead>
<tbody>
<tr>
<td data-bind="text: planName"></td>
<td class="hide-mobile txt-right" data-bind="text: numberOfParticipants"></td>
<td class="txt-right" data-bind="text: totalShares"></td>
</tr>
</tbody>
</table>

Answer 1

Use an ajax method to get the json list from server and bind the results in success callback of ajax method.
But you should have a list of plans in your root ViewModel,
var IssuePlansViewModel = function(data) {
var self = this;
self.planName = ko.observable(data.planName);
self.numberOfParticipants = ko.observable(data.numberOfParticipants);
self.totalShares = ko.observable(data.totalShares);
self.result = ko.observableArray(data.result);
return self;
}
function mainViewModel() {
var self = this;
self.plans = ko.observableArray([]);
$.ajax({
type: 'GET',
url: "GetPlanList",
dataType: "json",
contentType: 'application/json; charset=utf-8',
traditional: true, //// traditional option to true
success: function(result) {
ko.utils.arrayForEach(jsonResult, function(data) {
self.plans.push(new IssuePlansViewModel(data));
});
}
});
}
and bind mainViewModel to your html.
Oh, and in your html you may want to use a foreach loop to list plans,
<tbody data-bind="foreach: plans">
<tr>
<td data-bind="text: planName"></td>
<td class="hide-mobile txt-right" data-bind="text: numberOfParticipants"></td>
<td class="txt-right" data-bind="text: totalShares"></td>
</tr>
</tbody>