How to get json response in knockout js?

Question

i want to get a array from json to knockout js. for this i am using this code and i am trying to implement in adobe cq. but i am not able to get the response so any body can help here is my code

in 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>

In 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>

in 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" %>

<%

//Local variables
final SlingRepository repos = sling.getService(SlingRepository.class);
final UserManagerFactory umFactory = sling.getService(UserManagerFactory.class);
String pagepath = properties.get("propagePath","");
Session session = null;
List<String> list = new ArrayList<String>();
String listString = "";

try
{

    // Ensure that the currently logged on user has admin privileges.
    session = repos.loginAdministrative(null);

    final TidyJSONWriter writer = new TidyJSONWriter(response.getWriter());

list.add("a");
list.add("b");
list.add("a");
list.add("b");
list.add("a");
list.add("b");

    //Begin writing JSON response
    writer.object();
    writer.key("tagarray").array();
    Iterator<String> it = list.iterator();

        while(it.hasNext()) {
        listString += it.next();
            if(it.hasNext()) {
            listString += ",";
            }
        }
    writer.value(listString);
    writer.endArray();
    writer.endObject();
    session.logout();
}
catch (Exception e)
{
    System.out.println("myajaxsample Exception Occured: " + e.getMessage());
}
finally
{
    session.logout(); 
    session = null;
}
%>

Please help me to resolve this as i am new in knockout

Answer 1

You need your script like this

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/aib/personal/test0/jcr:content/content-page/horizontalline.json",function (timesheets) {
                self.timesheets.removeAll();
                self.timesheets(timesheets)
            }
        );
    }
};

 $(function () {
    ko.applyBindings(viewModel);
    viewModel.loadTimesheets();
});