I'm trying to extract an array from a JSON file and use it with Knockout.js. I've written the following code but can't seem to get the desired response. Can anyone help me out? Here's my approach:
Inside JSP
<table id="timesheets" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody data-bind="foreach: viewModel.timesheets">
<tr>
<td data-bind="text: firstname"></td>
<td data-bind="text: lastname"></td>
<td data-bind="text: month"></td>
<td data-bind="text: year"></td>
</tr>
</tbody>
</table>
Within Script
<script>
$(function () {
ko.applyBindings(viewModel);
viewModel.loadTimesheets();
});
function timesheet(timesheet) {
this.id = ko.observable(timesheet.id);
this.firstname = ko.observable(timesheet.firstname);
this.lastname = ko.observable(timesheet.lastname);
this.month = ko.observable(timesheet.month);
this.year = ko.observable(timesheet.year);
}
var viewModel = {
timesheets: ko.observableArray([]),
loadTimesheets: function () {
var self = this;
$.getJSON("/content/personal/test0/jcr:content/content-page/horizontalline.json",function (timesheets) {
self.timesheets.removeAll();
$.each(timesheets, function (index, item) {
self.timesheets.push(new timesheet(item));
});
}
);
}
};
</script>
Within JSON File
<%@page session="false" %>
<%@ page import="org.apache.sling.jcr.api.SlingRepository" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.day.cq.commons.TidyJSONWriter,
com.day.cq.tagging.Tag,
java.util.Locale,
com.day.cq.wcm.api.WCMMode,
com.day.cq.tagging.TagManager,
com.day.cq.tagging.TagCloud" %>
... additional JSON processing logic here ...
%>
If you could provide any assistance regarding this issue since I am fairly new to using Knockout.js, it would be greatly appreciated.