Excel data extraction using SheetJS/js-xlsx and its usage in AngularJS

Question

I want to extract xlsx data and display onto my webpage. I have used SheetJS/js-xlsx for extraction of data from XL sheet. Data is successfully getting extraced but I am not sure how to get this data into AngularJS for further usage.

/* set up XMLHttpRequest */
var url = "test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {
    type: "binary"
  });

  /* DO SOMETHING WITH workbook HERE */
  var first_sheet_name = workbook.SheetNames[0];
  /* Get worksheet */
  var worksheet = workbook.Sheets[first_sheet_name];
  var xldata = XLSX.utils.sheet_to_json(worksheet, {
    raw: true
  })
  console.log(xldata);
}

oReq.send();

In the console, I am able to see the data contained in test.xlsx excel sheet. To use this data contained in xldata variable, how do I go about in Angular JS? I tried this. But it does not work. Can someone please help?

   var app=angular.module("my-app",[]);
app.controller("myCtrl",function($scope){
    $scope.message=xldata;
});

<div ng-controller="myCtrl">
{{message}}
</div>

This is the error I am getting:

ReferenceError: xldata is not defined

Answer 1

It seems that xlData is returning a JSON object. Hence you cannot expect to see it the same way that console is able to show you.

Why don't you have an ng-repeat in your html to read and display the xldata?

In your html, do this

<Table>
<Thead>
<Tr>
<Th ng-repeat="(key,val) in message[0]">{{key}}</th>
</tr>
</thead>
<Tbody>
<Tr ng-repeat="(key,val) in message">
<Td>{{val}}</td>
</tr>
</tbody>
</Table>

Of course, it would be easier to suggest if you shared a snippet of your xldata JSON object.