My javascript code is executing after returning values to my event listener

I'm making use of javascript to read the excel file with exceljs but I see that the javascript function is returning the response to my html event listerner and continuining execution and reading the content of file.

How can i make this code to return value after all lines of code are executed completely. Please help as I'm new to Javascript and have built this code by loooking at lot of online resources

 readAndProcess(files) {
return new Promise(resolve => {
try {
const file = files[0];
let fileContent = [];
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e) => {
let result = e.target.result;
let columns = [];
let tableData = [];
let size;
if (result) {
// Create workbook & add worksheet
const wb = new ExcelJS.Workbook();
wb.xlsx.load(result).then(workbook => {
console.log(workbook, 'workbook instance');
workbook.eachSheet((sheet, id) => {
sheet.eachRow((row, rowIndex) => {
console.log(rowIndex, 'rowIndex');
console.log(row);
if (rowIndex === 1) {
columns = Object.entries(row.values).map(([k, v]) =>
({
field: v,
headerText: v
})
);
} else {
const part = {};
let index = 0;
Object.entries(row.values).map(([k, v]) => {
part[columns[index].field] = v;
index++;
}
);
tableData.push(part);
//console.log(tableData);
};
});
});
});
resolve({
success: true,
result: {
name: file.name,
size: file.size,
type: file.type,
columns: columns,
tableData: tableData
},
error: {
detail: ''
}
});
} else {
resolve({
success: false,
error: {
detail: 'Empty File : ' + result
}
})
}
}
} catch (err) {
resolve({
success: false,
error: {
detail: 'Error while reading file : ' + err.detail
}
});
}
});
}
}

The problem you're facing is that the function seems to be returning the result before it has finished reading and processing the file.

This is happening because the function that reads the file (it's called an "asynchronous" function) doesn't stop and wait for the file to be read. Instead, it starts reading the file and moves on to the next thing immediately. So, the function is moving on to the next thing (which is returning the result) before it has finished reading the file.

What you need to do is tell the function to wait until the file has been read and processed before returning the result.

In your code, you're already telling it to wait for the file to be read (using the onload function). But you also need to tell it to wait for the file to be processed (using the xlsx.load() function) before returning the result.

Here's what you can do:

1. Look for the part of your code that says wb.xlsx.load(result).then(workbook => {. This is where you start processing the file.

2. At the end of this part, you should see the word resolve followed by some curly brackets {}. This is where you're telling the function to return the result.

3. Move this resolve part (with everything inside the curly brackets) to the end of the xlsx.load() function. This will tell the function to wait until the file has been read and processed before returning the result.

You just need to move the resolve part to the right place, and your function should work as expected.