I have an Angular service to Parse Excel Files which looks something like this:
import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as XLSX from 'xlsx';
type AOA = any[][]
@Injectable({
providedIn:'root'
})
export class BomParseService {
data: AOA = []
constructor()
{
}
parseExcel(excelFile)
{
/* wire up file reader */
const target: DataTransfer = <DataTransfer>(excelFile.target);
if (target.files.length !== 1) throw new Error('Cannot use multiple files');
const reader: FileReader = new FileReader();
reader.onload = (e: any) =>
{
/* read workbook */
const bstr: string = e.target.result;
const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
/* grab first sheet */
const wsname: string = wb.SheetNames[0];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
/* save data */
this.data = <AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 }));
console.log("BOM PARSE SERVICE LOG: " , this.data)
return this.data
};
reader.readAsBinaryString(target.files[0]);
}
and as you can see I am trying to return the value of this.data. However, when I try to access this value in my component the variable I am storing the value under is returning undefined.
async ReadExcel(event)
{
return new Promise<Object>((resolve, reject) =>
{
let excelContents = this.parser.parseExcel(event)
console.log(excelContents)
}
)}
parser is a private class referring to the service.
Console logging excelContents
yields undefined in the console even though I would think that it should now take on the return value of the service function. Am I missing something obvious here?
Yes you are. You need to call resolve
to set the value returned by your promise:
parseExcel(excelFile): Promise<any>
{
/* wire up file reader */
const target: DataTransfer = <DataTransfer>(excelFile.target);
if (target.files.length !== 1) throw new Error('Cannot use multiple files');
const reader: FileReader = new FileReader();
return new Promise((resolve, reject) => {
reader.onload = (e: any) =>
{
/* read workbook */
const bstr: string = e.target.result;
const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
/* grab first sheet */
const wsname: string = wb.SheetNames[0];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
/* save data */
this.data = <AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 }));
console.log("BOM PARSE SERVICE LOG: " , this.data)
resolve(this.data);
};
reader.readAsBinaryString(target.files[0]);
}
then your async function would just look like this:
async ReadExcel(event)
{
return this.parser.parseExcel(event)
}
More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise