I am currently trying to take a simple table from an Excel spreadsheet and convert it to a Javascript object (assigned to a variable). This is the broad scope of what I am attempting, however I think I am close to the solution. I currently can select the spreadsheet I would like to convert, and get it to display on my screen in HTML. That is achieved with the following JS code (ignore the print to console comments,I will come back to that):
$("#input").on("change", function (e) {
var file = e.target.files[0];
// input canceled, return
if (!file) return;
var FR = new FileReader();
FR.onload = function(e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, {type: 'array'});
var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
// header: 1 instructs xlsx to create an 'array of arrays'
var result_obj = XLSX.utils.sheet_to_json(firstSheet);
console.log(result_obj); // PRINTS TO CONSOLE
console.log(result_obj[0].Project) // PRINTS TO CONSOLE
// data preview
var output = document.getElementById('result');
output.innerHTML = JSON.stringify(result, null, 2);
return result_obj
};
console.log(result_obj); // DOES NOT PRINT TO CONSOLE
FR.readAsArrayBuffer(file);
});
The HTML is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="input" accept=".xls,.xlsx,.ods">
<pre id="result"></pre>
This code was taken from the following stackOverflow thread:
Reading excel file into array using javascript
The resulting effect looks like (the data is irrelevant, it is simply from the excel file I am pulling from):
My issue is that I cannot seem to work with the result_obj defined in the FileReader function, outside of that functions scope. I understand that variables defined in a function are local to that function. Hence, why the two console.log's print to the console:
console.log(result_obj); // PRINTS TO CONSOLE
console.log(result_obj[0].Project) // PRINTS TO CONSOLE
But the console.log at the bottom of the code will not. You can see in the script that I attempt to return result_obj, but that still does not allow the bottom console.log to work.
The ideal case is that I can select a file to import, and once that has been done I can freely use the result_obj in other functions, not just in the functions scope. For example, if I run this script and enter a file, I would then like to be able to go to console, and iterate through result_obj without it returning that result_obj is not defined.
Thank you all!
