Hey there, I've gone ahead and created a basic demo to showcase some binding concepts and how ViewModel construction works. I made some adjustments to your JSON data in order to make it work smoothly. This demo includes examples of template, foreach, and text binding. If you're new to this, I suggest checking out the knockout site tutorials.
Below are the HTML bindings:
Sports
<ul data-bind="template: { name: 'listingTemplate', foreach: sports}"></ul>
</br>
Music
<ul data-bind="template: { name: 'listingTemplate', foreach: music}"></ul>
<script type="text/html" id="listingTemplate">
<li>
<span data-bind="text: name"></span></br>
<span data-bind="text: description"></span></br>
<span data-bind="text: endDate"></span></br></br>
</li>
</script>
And here are the viewmodels:
var Listing = function(data) {
this.name = ko.observable(data.Name || '');
this.description = ko.observable(data.Description|| '');
this.endDate = ko.observable(data.EndDate|| '');
};
var ViewModel = function(data) {
this.sports = ko.observableArray(
ko.utils.arrayMap(data.Sport, function(i) {return new Listing(i);})
);
this.music = ko.observableArray(
ko.utils.arrayMap(data.Music, function(i) {return new Listing(i);})
);
};