• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

123
Views
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>
</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

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
about 3 years ago · Juan Pablo Isaza Report

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!

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error