I've developed a file upload system that reads Excel files and uploads data to a database (using Mongoose). After implementing the code, I noticed that when I use console.log(sheetData), it returns an array of arrays with objects inside. Each internal array contains only 100 objects before creating a new array. Below is the code snippet along with images illustrating the issue.
Code
//Excel Upload
const handleExcelSubmit = async (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = async (e) => {
const data = e.target.result;
const workbook = xlsx.read(data, { type: "binary" });
const sheetNames = workbook.SheetNames[0];
const workSheet = workbook.Sheets[sheetNames];
const sheetData = xlsx.utils.sheet_to_json(workSheet, {
header: "1",
});
const headers = sheetData[0];
return convertToJson(headers, sheetData); // <--- Why does it return an array of arrays???
dispatch(importExcel(sheetData)); // currently disabled for debugging
};
reader.readAsBinaryString(excelFile);
};
//Converts data to json. Unsure if this is necessary as I received the same data without using this function
const convertToJson = async (headers, data) => {
const rows = [];
data.forEach(async () => {
let rowData = {};
rows.forEach(async (element, index) => {
rowData[headers[index]] = element;
});
rows.push(rowData);
});
setTableData(rows);
console.log(tableData);
return rows;
};
Image - Array of Arrays
https://i.stack.imgur.com/klmZR.png https://i.stack.imgur.com/HoZ4j.png
Summary
The current behavior involves creating multiple arrays instead of just one containing all 108 objects. Is there a way to modify the code so that only a single array is created with all the objects?
(Due to production considerations, I have hidden sensitive data in the provided images. Apologies for any inconvenience.)
Thank You