showing ajax data via knockout

Question

I'm working with my first knockout page in a C# application. I can see the ajax data getting transferred from my controller to the page through fiddler but I can't get it to displav on the page.

First, is there a way in VS2012 to look at the javascript variables? I wish I could set a break point to see what is going on...

This is the javascript from my MVC page:

<script type="text/javascript">

var RecID = "@Model.RecID";


var groupLine = function() {
    var self = this;
    self.ID = ko.observable();
    self.GroupName = ko.observable();
    self.EndDate = ko.observable();
    self.bRemove = ko.observable();
};

var groupModel = function () {
    var self = this;
    self.lines = ko.observableArray([new groupLine()]);
    // Operations
    self.addLine = function() { self.lines.push(new Group()) };
    self.removeLine = function(line) { self.lines.remove(line) };


     self.GroupList = ko.observableArray([]);
     var CurrentGroups = ko.observableArray([]);

     $.ajax({
        url: '@Url.Action("GetGroups", "Edit")',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: {szUserRecID: RecID},
        success: function (data) {
            CurrentGroups(data);
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
     });

     $.ajax({
        url: '@Url.Action("GetAllGroups", "Edit")',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: {},
        success: function (data) {
           self.GroupList(data);
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
 };


ko.applyBindings(new groupModel());

Data from the controller looks like this (GetAllGroups/JS:GroupList):

[{"ID":756,"GroupName":"Blue"},{"GroupName":"Red","ID":755},{"GroupName":"Green","ID":757}]

Data from the controller for GetGroups/JS:CurrentGroups:

[{"ID":756,"GroupName":"Blue"},{"GroupName":"Red","ID":755}]

This is not working but I just want to display the current groups using a table:

<h2>Current Groups</h2>
<div data-bind="template: { name: 'group-template', foreach: CurrentGroups }"></div>

<table>
<thead>
    <tr>
        <th>Group Name</th>
        <th>Duration</th>
    </tr>
</thead>
<tbody data-bind="foreach: CurrentGroups">
    <tr>
        <td>
            <span data-bind="text: GroupName"></span>
        </td>            
    </tr>

</tbody>
</table>

The next table I want to populate as I go with new groups using a dropdown list, but again no data is showing in the drop down list....

Answer 1

Does the foreach seem to create a bunch of blank tr and spans?

It looks like you are pushing the data into observable array but each element would not be an observable.

 success: function (data) {
            CurrentGroups(data);
        },

Should be more like

    success: function(data) {
    // use mapper.  complex objects require 
    // mapping configs
    ko.mapping.fromJS(data, {}, self);

    // or  do it manually 
    var currentGroups = $.map(data, function(data) {
        var item = new groupLine();
        item.GroupName(data.GroupName);// pushes each element property into observable
        ... //all properties
        return item;
    });

      self.CurrentGroups(currentGroups);
}

You should create a new currentGroup object foreach item returned and then place them into the observable array.

You should look at the knockout mapping plugin to push the data into observables for you. http://knockoutjs.com/documentation/plugins-mapping.html

** EDIT **

Changed the sample code to align to question code