Question

0

73

Views

how to display multi dimension array values on screen

// aap.component.html

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


// app.component.ts

onFileChange(event: any) {
    this.exceltoJson = {};
    
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(event.target);
    
    const reader: FileReader = new FileReader();
    reader.readAsBinaryString(target.files[0]);
    
    
    this.exceltoJson['filename'] = target.files[0].name;
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(binarystr, { 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;

       
        
      }


      
      console.log(this.exceltoJson);
    };

  }

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

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

I think that the solution is that you must use 2 *ngFor in component.html file.

It must be like:

<.. *ngFor="let items of exceltoJson"> <.. *ngFor="let item of items"> </..> </..>

Hope I helped you!

7 months ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T11:03:53.212Z

Consider that you know all sheets and they are fix.

You can

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

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

<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>
            </ul>
        </div>