I am trying to create a table using Json response and Knockout.js

In Javascript

$(document).ready(function() {

    $.ajax({
        method : "POST",
       url : "devTestServlet",
       success : function(data) {

           ko.applyBindings({ 
               rows : data
               });
       }
       });
});

In HTML first of all I imported scripts in header:

   <script src=".0.0.js"></script>  
    <script src=".mapping/2.4.1/knockout.mapping.min.js"></script>
    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
    <script src=".min.js"></script>

Then in body I did following:

<table >
<tr>
<th>ID</th>
<th>Name</th>
<th>Start Date</th>
<th>Finish Date</th>
<th>Position</th>
</tr>
<tbody data-bind="foreach: rows">
<tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: Start_Date"></td>
            <td data-bind="text: Finish_Date"></td>
            <td data-bind="text: Position"></td>
</tr>
</table>

Format of the data looks like following:

[
        {
            "id": "1",
            "name": "Mike",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"

        },
        {
            "id": "2",
            "name": "Jhon",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"
        },
        {
            "id": "2",
            "name": "Jhon",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"
        }
] 

This is my first program with Knockout.js so may be I am missing something. Could you please suggest ?

I am trying to create a table using Json response and Knockout.js

In Javascript

$(document).ready(function() {

    $.ajax({
        method : "POST",
       url : "devTestServlet",
       success : function(data) {

           ko.applyBindings({ 
               rows : data
               });
       }
       });
});

In HTML first of all I imported scripts in header:

   <script src="http://ajax.aspnetcdn./ajax/knockout/knockout-3.0.0.js"></script>  
    <script src="http://cdnjs.cloudflare./ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
    <script src="http://code.jquery./jquery-latest.min.js"></script>

Then in body I did following:

<table >
<tr>
<th>ID</th>
<th>Name</th>
<th>Start Date</th>
<th>Finish Date</th>
<th>Position</th>
</tr>
<tbody data-bind="foreach: rows">
<tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: Start_Date"></td>
            <td data-bind="text: Finish_Date"></td>
            <td data-bind="text: Position"></td>
</tr>
</table>

Format of the data looks like following:

[
        {
            "id": "1",
            "name": "Mike",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"

        },
        {
            "id": "2",
            "name": "Jhon",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"
        },
        {
            "id": "2",
            "name": "Jhon",
            "Start_Date": "Sun 01/06/08",
            "Finish_Date": "Sun 01/06/08",
            "Position": "Trainee"
        }
] 

This is my first program with Knockout.js so may be I am missing something. Could you please suggest ?

• javascript
• jquery
• json
• knockout.js

• Code is written following instruction from this link: knockoutjs./documentation/foreach-binding.html – NNN Commented Jan 28, 2014 at 15:05

4 Answers 4

$.ajax returns the response as a string by default, knockout needs a JavaScript object. So you either have to specify dataType as JSON

$.ajax({
   method: "POST",
   url: "devTestServlet",
   dataType: 'json', 
   success: function(data) {
       ko.applyBindings({ 
           rows : data
       });
   }
});

or do the conversion yourself

$.ajax({
   method: "POST",
   url: "devTestServlet",
   success: function(data) {
       ko.applyBindings({ 
           rows : JSON.parse(data)
       });
   }
});

1. Put jQuery before Knockout JS in your libraries.

2. Make sure rows is a ko.observableArray();

3. Change: ko.applyBindings({ rows : data }); to: rows(data);

You're doing it wrong.

You should add the bindings and update them. It should look a little something like this:

var HomeModel = function() {
    this.rows = ko.observableArray([]);
};

$(document).ready(function() {
    var model = new HomeModel();
    ko.applyBindings(model);

    $.ajax({
        method : "POST",
       url : "devTestServlet",
       success : function(data) {
           for (var x in data) {
               model.rows.push(data[x]);
           }
       }
       });
});

Since 'rows' is now an 'observableArray' it will update your HTML agains changes. Goodluck!

1. jQuery reference should be before the knockout.js
2. other than that your code is fine and works for me personally: http://jsfiddle/ruslans/eybZ6/

I'd remend placing a stylesheet refernce in the and the script refs somewhere at the bottom of the page:

<head>
    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
</head>
<body>
    <content />
    <script src="http://code.jquery./jquery-latest.min.js"></script>
    <script src="http://ajax.aspnetcdn./ajax/knockout/knockout-3.0.0.js"></script>  
    <script src="http://cdnjs.cloudflare./ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
</body>