Develop Reference

Reading excel file into array using javascript

I'm trying to read an excel file and create a multidimensional array in javascript with it.
The excel file will look like:
AA11 AA22 AN65
AB11 AB22 AN64
...
I need it to create an array that looks like:
[
[AA11, AA22, AN65],
[AB11, AB22, AN64]
]
So far, I've been able to bring up a file selection window, and I believe it's reading the file, I just think it might not be putting the data into the array correctly. This is what I have so far:
<script type="text/javascript">
$(function () {
$("#input").on("change", function () {
var excelFile,
var array = [[],[]];
fileReader = new FileReader();
$("#result").hide();
fileReader.onload = function (e) {
var buffer = new Uint8Array(fileReader.result);
$.ig.excel.Workbook.load(buffer, function (workbook) {
var column, row, newRow, cellValue, columnIndex, i,
worksheet = workbook.worksheets(0),
columnsNumber = 0,
gridColumns = [],
data = [],
worksheetRowsCount;
while (worksheet.rows(0).getCellValue(columnsNumber)) {
columnsNumber++;
}
for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
column = worksheet.rows(0).getCellText(columnIndex);
gridColumns.push({ headerText: column, key: column });
}
for (i = 1, worksheetRowsCount = worksheet.rows().count() ; i < worksheetRowsCount; i++) {
newRow = {};
row = worksheet.rows(i);
for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
cellValue = row.getCellText(columnIndex);
//newRow[gridColumns[columnIndex].key] = cellValue;
array[row,columnIndex] = cellValue;
}
window.alert(array[0][0]);
data.push(array);
}
</script>
Any help would be greatly appreciated.

Not sure what you're using to parse the Excel, is it IgniteUI ? For what it's worth, the free (community edition) of SheetJS, js-xlsx provides a few functions that produce exactly the output you needed, given the spreadsheet you provided.
The docs are a bit messy, but they are complete, the most interesting sections for this use-case are: Browser file upload form element under Parsing workbooks and XLSX.utils.sheet_to_json. You can run a test with the type of spreadsheet you provided in the code sample below:
$("#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 = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
// data preview
var output = document.getElementById('result');
output.innerHTML = JSON.stringify(result, null, 2);
};
FR.readAsArrayBuffer(file);
});
<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>

Here the full solution aditionally I've added a group by category function
to demostrante that we can apply functions to the json array.
(async() => {
const url = "./yourfile.xlsx";
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const sheetValues = XLSX.utils.sheet_to_json(worksheet);
const groupByCategory = sheetValues.reduce((group, product) => {
const { category } = product;
group[category] = group[category] ?? [];
group[category].push(product);
return group;
}, {});
console.log(groupByCategory)
/* DO SOMETHING WITH workbook HERE */
})();

Accessing Cells with Sheetjs

I followed the demo here:
https://github.com/SheetJS/js-xlsx/tree/master/demos/electron
I'm able to drag an excel file into my electron app.
The documentation says, you can access every cell with:
for(var R = range.s.r; R <= range.e.r; ++R) {
for(var C = range.s.c; C <= range.e.c; ++C) {
var cell_address = {c:C, r:R};
/* if an A1-style address is needed, encode the address */
var cell_ref = XLSX.utils.encode_cell(cell_address);
}
}
How do I use it with my Code below? I got the content of the file stored in my test variable, but I'm not able to access it. The documentation lack of information there.
var do_file = (function() {
return function do_file(files) {
var f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
data = new Uint8Array(data);
test = XLSX.read(data, {type: 'array'});
console.log(test);
};
reader.readAsArrayBuffer(f);
};
})();
I got no clue how to start with it, thanks in advance

Here it goes:
var do_file = (function() {
return function do_file(files) {
var f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
data = new Uint8Array(data);
//process_wb(XLSX.read(data, {type: 'array'}));
/* read the file */
var workbook = XLSX.read(data, {type: 'array'}); // parse the file
var sheet = workbook.Sheets[workbook.SheetNames[0]]; // get the first worksheet
/* loop through every cell manually */
var range = XLSX.utils.decode_range(sheet['!ref']); // get the range
for(var R = range.s.r; R <= range.e.r; ++R) {
for(var C = range.s.c; C <= range.e.c; ++C) {
/* find the cell object */
console.log('Row : ' + R);
console.log('Column : ' + C);
var cellref = XLSX.utils.encode_cell({c:C, r:R}); // construct A1 reference for cell
if(!sheet[cellref]) continue; // if cell doesn't exist, move on
var cell = sheet[cellref];
console.log(cell.v);
};
reader.readAsArrayBuffer(f);
};
})();

Generally you can access a cell with standard excel coordinates like
console.log(sheet['My Sheet Name']['B3'].v);
See the full data types here: https://github.com/SheetJS/sheetjs/blob/master/README.md#cell-object

How to pass All Arrays in Google Script

I have a HTML File that upload a TSV File and display it in console as an array. here is the code.
document.getElementById('file').onchange = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
// Entire file
console.log(this.result);
// By lines
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
// By tabs
var tabs = lines[line].split('\\t');
for(var tab = 0; tab < tabs.length; tab++){
console.log(tabs[tab]);
}
}
};
reader.readAsText(file);
};
<input type="file" name="file" id="file">
now here is my code.gs
function doGet(e){
var html = HtmlService.createHtmlOutputFromFile("index");
return html;
}
My question is how can I pass the array from the html file to code.gs? maybe a sample Logger.log will be okay form me. My target here is to upload that array in google sheet. TYSM

How about following modification? When it sends the values on html to GAS, you can achieve this using google.script.run.
In this modifed sample, the array is sent to work() on GAS, and the array data is imported to Spreadsheet.
Modified Script :
index.html
document.getElementById('file').onchange = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
// Entire file
console.log(this.result);
// By lines
var ar = []; // <--- added
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
// By tabs
var tabs = lines[line].split('\t'); // <--- modified from '\\t' to '/t'
for(var tab = 0; tab < tabs.length; tab++){
console.log(tabs[tab]);
}
ar.push(tabs); // <--- added
}
google.script.run.work(ar); // <--- added
};
reader.readAsText(file);
};
code.gs
function doGet(e){
var html = HtmlService.createHtmlOutputFromFile("index");
return html;
}
function work(res){
var ss = SpreadsheetApp.getActiveSheet();
ss.getRange(1,1,res.length,res[0].length).setValues(res);
}
Input
a1 b1 c1
a2 b2 c2
a3 b3 c3
Output
If I misunderstand your question, I'm sorry.

reader.onload: Looping Jquery function

I was wondering if it is possible to get this right. I am using a Jquery cropping tool (cropit). I am trying to put multiple file inputs into several cropper instances at once. Unfortunately it doesnt work that well.
For example, if I upload three images, the first two croppers are empty and the last one gets one of the images randomly. Here is the function:
function handleCropit(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var count = counterCropit();
var reader = new FileReader();
reader.onload= function(e){ $('#image-cropper'+count).cropit('imageSrc', e.target.result);};
reader.readAsDataURL(file);
}
}

Figured it out!
function handleCropit(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var count = counterCropit();
var croper = $('#image-cropper'+count);
var reader = new FileReader();
reader.onload= (function (yo) {return function(e){ yo.cropit('imageSrc', e.target.result);}})(croper);
reader.readAsDataURL(file);
}
}

Issue in a for loop, get only the last item [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 5 years ago.
I´m using fileReader to read the content of all selected files. After reading them with the fileReader API, I append the content to the DOM. That works perfectly.
It creates one p element per file.
Now I want to store each file content to local storage as well. Unfortunately, It stores only the last item. What´s going wrong? Thank you for your tips.
JS
$("input[name='uploadFile[]']").on("change", function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader)
return;
for (var i = 0; i < files.length; i++) {
(function(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var textObject = event.target.result.replace(/\r/g, "\n");
var textHTML = event.target.result.replace(/\r/g, "<br/>");
var text = e.target.result;
var p = document.createElement("p");
p.innerHTML = textHTML;
$('#results').append(p);
localStorage.setItem('letter'+ i, JSON.stringify(textObject));
};
reader.readAsText(file, 'ISO-8859-1');
})(files[i]);
}
});

The problem is that, by the time the onload is fired, i has been changed by the loop. This means that localStorage.setItem('letter'+ i will always refer to the last element in the array. You actually have the correct fix already in place -- the immediately invoked function expression -- but you need to add i as a parameter as well.
(function(file, index) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var textObject = event.target.result.replace(/\r/g, "\n");
var textHTML = event.target.result.replace(/\r/g, "<br/>");
var text = e.target.result;
var p = document.createElement("p");
p.innerHTML = textHTML;
$('#results').append(p);
localStorage.setItem('letter'+ index, JSON.stringify(textObject));
};
reader.readAsText(file, 'ISO-8859-1');
})(files[i], i);

There is also another solution if you can use let
let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Here is what it could look like:
for (let i = 0; i < files.length; i++) {
let file = files[i];
let name = file.name;
let reader = new FileReader();
reader.onload = function(e) {
var textObject = e.target.result.replace(/\r/g, "\n");
var textHTML = e.target.result.replace(/\r/g, "<br/>");
var text = e.target.result;
var p = document.createElement("p");
p.innerHTML = textHTML;
$('#results').append(p);
localStorage.setItem('letter'+ i, JSON.stringify(textObject));
};
reader.readAsText(file, 'ISO-8859-1');
}