Samples / guidance for use in Knockout js #1061

New Issue

2018-04-02T16:06:34Z

VBartilucci commented

2018-04-02 16:06:34 +00:00

(Migrated from github.com)

I've been trying to get files read and passed to the viewmodel in knockout js - there's details in this question at StackOverflow

I have the data back up in the viewmodel now, but I'm not quite sure how to access it for binding, et al. The data comes back as an object, with the sheet(s) as arrays within the object, and I can't quite get at it.

I've not found any examples or info on using the package in Knockout, and I've been hacking my way through it myself. Some direction on some samples would be useful.,

I've been trying to get files read and passed to the viewmodel in knockout js - there's details in [this question at StackOverflow](https://stackoverflow.com/questions/49493474/js-xlsx-in-knockout-pass-sheet-data-back-to-page-viewmodel) I have the data back up in the viewmodel now, but I'm not quite sure how to access it for binding, et al. The data comes back as an object, with the sheet(s) as arrays within the object, and I can't quite get at it. I've not found any examples or info on using the package in Knockout, and I've been hacking my way through it myself. Some direction on some samples would be useful.,

SheetJSDev commented

2018-04-02 17:18:59 +00:00

(Migrated from github.com)

At some point we'll think about putting together a more complete demo. For now, hopefully this fiddle suffices: https://jsfiddle.net/sheetjs/xpu12hwu/

The core idea is to generate a data table from an array of arrays structure. The template is straightforward:

<table data-bind="foreach: aoa">
    <tr data-bind="foreach: $data">
      <td><span data-bind="text: $data"></span></td>
    </tr>
</table>

The model is set up with an AOA:

/* knockout setup */
var ViewModel = function() {
  /* use an array of arrays */
  this.aoa = ko.observableArray([
    [1,2],
    [3,4]
  ]);
};

var model = new ViewModel();
ko.applyBindings(model);
/* do an update to confirm KO was loaded properly */
model.aoa([[1,2,3],[4,5,6]]);

That model variable is visible to other functions, like the actual file input callback. The skeleton block is identical to the HTML5 file input example.

Once the workbook is read, the first worksheet is converted to an array of arrays and the model is updated:

/* update model */
function process_wb(wb) {
  /* pull first workbook */
  var ws = wb.Sheets[wb.SheetNames[0]];
  /* convert to AOA */
  var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
  /* update model */
  model.aoa(aoa);
}

At some point we'll think about putting together a more complete demo. For now, hopefully this fiddle suffices: https://jsfiddle.net/sheetjs/xpu12hwu/ The core idea is to generate a data table from an array of arrays structure. The template is straightforward: ```html <table data-bind="foreach: aoa"> <tr data-bind="foreach: $data"> <td><span data-bind="text: $data"></span></td> </tr> </table> ``` The model is set up with an AOA: ```js /* knockout setup */ var ViewModel = function() { /* use an array of arrays */ this.aoa = ko.observableArray([ [1,2], [3,4] ]); }; var model = new ViewModel(); ko.applyBindings(model); /* do an update to confirm KO was loaded properly */ model.aoa([[1,2,3],[4,5,6]]); ``` That `model` variable is visible to other functions, like the actual file input callback. The skeleton block is identical to the [HTML5 file input example](https://docs.sheetjs.com/#parsing-workbooks). Once the workbook is read, the first worksheet is converted to an array of arrays and the model is updated: ```js /* update model */ function process_wb(wb) { /* pull first workbook */ var ws = wb.Sheets[wb.SheetNames[0]]; /* convert to AOA */ var aoa = XLSX.utils.sheet_to_json(ws, {header:1}); /* update model */ model.aoa(aoa); } ```

Sign in to join this conversation.