Question

I’m not sure if I’m trying to do too much here, but here is the scenario. I have an asp.net mvc page that, on the first time loading, returns a table of data in a view using the standard foreach mechanisms in the mvc framework. If the user has javascript enabled, I want to use knockout to update the table going forward. Is there a way to have knockout read the data from the dom table and use that data as the initial observable collection. From then on out, I would use knockout and ajax to add, edit, or delete data.

In a nutshell, I need to parse an html table into a knockout observable collection.

Answer 1

I’ve had a go at coding this up:

Here’s the basic markup:

<table id="table" data-bind="template: { name: 'table-template' }">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Richard</td>
      <td>Willis</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

<!-- Here is the template we'll use for re-building the table -->

<script type="text/html" id="table-template">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: data">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: surname"></td>
    </tr>
  </tbody>
</script>

Javascript:

(function() {

  function getTableData() {
    // http://johndyer.name/html-table-to-json/

    var table = document.getElementById('table');
    var data = [];
    var headers = [];

    for (var i = 0; i < table.rows[0].cells.length; i++) { 
      headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
    }
    // go through cells 
    for (var i = 1; i < table.rows.length; i++) {
      var tableRow = table.rows[i];
      var rowData = {};
      for (var j = 0; j < tableRow.cells.length; j++) {
        rowData[headers[j]] = tableRow.cells[j].innerHTML;
      }
      data.push(rowData);
    }

    return data;     
  }

  var Vm = function () {  
    this.data = ko.observableArray(getTableData());     
  };

  ko.applyBindings(new Vm(), document.getElementById('table'));
})();

You can extend this concept using the mapping plugin to create observables for each row: http://knockoutjs.com/documentation/plugins-mapping.html

View a demo here: http://jsfiddle.net/CShqK/1/

EDIT: I’m not saying this is the best approach, as it can be costly to traverse a large table to get the data. I would probably just output the JSON in the page as suggested by others in this thread.