Papa Parse - Populate table with JSON after parse CSV file

Question

I'm adding a new functionality to my web application, so the user can upload a .csv file and send it to the database. At the time of the upload, I want to read the data as JSON and display it in a table, so the user can check if everything is as it should.

The problem is that application can read the files perfectly using Papa Parse, but it doesn't populate the table and it doesn't show any data... And I get no error response, aswell.

What am I doing wrong?

component.ts

import { Component, OnInit } from '@angular/core';
   import Papa = require('papaparse');

   @Component({
     selector: 'app-formulario-csv',
     templateUrl: './formulario-csv.component.html',
     styleUrls: ['./formulario-csv.component.css']
   })

   export class FormularioCsvComponent implements OnInit {
     tableData: any = null;
     constructor() {  }

     ngOnInit() {
     }

     csv2Array(fileInput) {
       Papa.parse(fileInput.target.files[0], {
         skipEmptyLines: true,
         header: true,
         complete: function(results) {
           this.tableData = results.data;
           console.log(this.tableData);
         }
       });
     }
   }

component.html

<!DOCTYPE html>

  <h2>Import CSV</h2>

  <input type="file" accept=".csv" (change)="csv2Array($event)">
  <table *ngIf="tableData">
      <tr>
        <th>CD</th>
        <th>NOME</th>
        <th>EMAIL</th>
      </tr>
      <tr *ngFor="let row of tableData">
        <td>{{ row.cd }}</td>
        <td>{{ row.nome }}</td>
        <td>{{ row.email}}</td>
      </tr>
  </table>

Just a guess. Try changing your complete `function` to an arrow function. Like this: `(results) => {...}`. — R. Richards, Sep 10 '18 at 16:52
Thank you so much @R.Richards - i also added an async function to this arrow function to have an await call. — Mitalee Rao, Jul 18 '20 at 12:32

Papa Parse - Populate table with JSON after parse CSV file

0 Answers0