title: Create table from Json response using Knockout.js
body: <p>I am trying to create a table using Json response and Knockout.js </p>
  
  <p>In Javascript</p>
  
  <pre><code>$(document).ready(function() {
  
      $.ajax({
          method : "POST",
         url : "devTestServlet",
         success : function(data) {
  
             ko.applyBindings({ 
                 rows : data
                 });
         }
         });
  });
  </code></pre>
  
  <p>In HTML first of all I imported scripts in header: </p>
  
  <pre><code>   &lt;script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"&gt;&lt;/script&gt;  
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/main.css" type="text/css"&gt;&lt;/link&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Then in body I did following:</p>
  
  <pre><code>&lt;table &gt;
  &lt;tr&gt;
  &lt;th&gt;ID&lt;/th&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Start Date&lt;/th&gt;
  &lt;th&gt;Finish Date&lt;/th&gt;
  &lt;th&gt;Position&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tbody data-bind="foreach: rows"&gt;
  &lt;tr&gt;
              &lt;td data-bind="text: id"&gt;&lt;/td&gt;
              &lt;td data-bind="text: name"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Start_Date"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Finish_Date"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Position"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Format of the data looks like following: </p>
  
  <pre><code>[
          {
              "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"
          }
  ] 
  </code></pre>
  
  <p>This is my first program with Knockout.js so may be I am missing something. Could you please suggest ?</p>