Skip to content

how to display multi dimension array values on screen

enter image description here

// aap.component.html

<ul  *ngFor="let items of exceltoJson" >
  <li> {{ items }} </li>
<input type="file" (change)="onFileChange($event)">

// app.component.ts

onFileChange(event: any) {
    this.exceltoJson = {};
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(;
    const reader: FileReader = new FileReader();
    this.exceltoJson['filename'] = target.files[0].name;
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string =;
      const wb: XLSX.WorkBook =, { type: 'binary' });

      for (var i = 0; i < wb.SheetNames.length; ++i) {
        const wsname: string = wb.SheetNames[i];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
        const data = XLSX.utils.sheet_to_json(ws);
        this.exceltoJson[`sheet${i + 1}`] = data;



Hi, using above code I get the data on console but I want to disply on screen in tabular form. This data is getting from multiple sheets from a single file.

I tried forEach, JSON.parse() but not able to get success. Can anyone help me how to display using angular


Consider that you know all sheets and they are fix.

You can

<ul  *ngFor="let items of exceltoJson[1]" >
  <li> {{ items }} </li>

<ul  *ngFor="let items of exceltoJson[2]" >
  <li> {{ items }} </li>

<input type="file" (change)="onFileChange($event)">

Or you can use a ngfor inside ngfor like @ataerg suggested

        <div *ngFor="let sheets of exceltoJson">
            <ul  *ngFor="let items of sheets " >
              <li> {{ items }} </li>