I have written a code that loads an excel file into a JavaScript array.
function Upload() {
//Reference the FileUpload element.
var fileUpload = document.getElementById("fileUpload");
//Validating if the uploaded file is a valid Excel file.
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
//For Browsers other than IE.
if (reader.readAsBinaryString) {
reader.onload = function (e) {
ProcessExcel(e.target.result);
};
reader.readAsBinaryString(fileUpload.files[0]);
} else {
//For IE Browser.
reader.onload = function (e) {
var data = "";
var bytes = new Uint8Array(e.target.result);
for (var i = 0; i < bytes.byteLength; i++) {
data += String.fromCharCode(bytes[i]);
}
ProcessExcel(data);
};
reader.readAsArrayBuffer(fileUpload.files[0]);
}
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid Excel file.");
}
};
function ProcessExcel(data) {
//Reading the Excel File data.
var workbook = XLSX.read(data, {
type: 'binary'
});
//Getting the name of First Sheet.
var firstSheet = workbook.SheetNames[0];
//Reading all rows from First Sheet into a JSON array.
excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
localStorage["excelRows"] = JSON.stringify(excelRows);
window.open("main screen.html", "Badge Draw - game");
};
Whenever a button is clicked, the array is randomized, and the element at index [0] is displayed in a label.
//loading the file into array
memberDetails = JSON.parse(localStorage["excelRows"]);
//randomizing the array
for (let i = memberDetails.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * i);
const temp = memberDetails[i];
memberDetails[i] = memberDetails[j];
memberDetails[j] = temp;
}
//getting the values stored at index 0
memberNumber = memberDetails[0].Badge;
memberName = memberDetails[0].Name;
memberNumberLabel = document.createElement("label");
var memberNumberText = document.createTextNode(memberNumber);
memberNumberLabel.id = "memberNumber";
memberNumberLabel.appendChild(memberNumberText);
document.body.appendChild(memberNumberLabel);
document.getElementById("memberNumber").setAttribute("style", "color: #000000; font-size: XXX-large; font-weight: bold; position: fixed; left: 40%; top: 40%");
memberNameLabel = document.createElement("label");
var memberNameText = document.createTextNode(memberName);
memberNameLabel.id = "memberName";
memberNameLabel.appendChild(memberNameText);
document.body.appendChild(memberNameLabel);
document.getElementById("memberName").setAttribute("style", "color: #000000; font-size: xxx-large; font-weight: bold; position: fixed; left: 40%; top: 60%");
}
There are only 6 elements in the array for testing purposes. However, after numerous tests, I've observed that the element at index [0] before randomization never appears. I can print the array and verify that all elements are present, but calling element [0] always seems to fail.
I believe it's a logical error but I'm unable to debug it myself.
Any assistance would be greatly appreciated.