Render CSV parsed with Papaparse into HTML

Ionic Framework ionic-v3
1

I’m working with Ionic 3 and I need to visualize a CSV in my app. I used Papaparse to read the file and I got them with console.log(this.csvData) ![08|690x344]

But I can’t show them in the HTML file (the space in blank should show the table with the info). All I want is a table with the info of the CSV file local store. If you can see headerRow and csvData are empty when calling {{headerRow}} and {{csvData}} in HTML. The thing is I can’t access to both arrays to render them.
I’m using Ionic 3 with Angular 5.

this is part of my .ts file ;

export class myPage {
csvData: any[] = [];
headerRow: any[] = [];
url = 'assets/json/data.csv'; 
constructor(public navCtrl: NavController, public navParams:
    NavParams, private httpClient: HttpClient, 
    public modalController: ModalController) {
        this.extract() 
}
private extract(){
Papa.parse(this.url, {
  download: true,
  complete: function(results) {
    this.csvData=results.data;  
    this.headerRow = this.csvData[0]; 
    this.csvData.splice(0, 1); 
    console.log(this.csvData);  
    console.log(this.headerRow);  
    }
});
}
}

this is part of my .HTML file :

<ion-content>
 <ion-item> 
        <div  class="data-scroll">
            <table border="1" class="data-table">
                  <tr>
                    <td *ngFor="let row of headerRow; let i = index" text-center>
                      <b> {{ row }} </b>
                    </td>
                  </tr>    
                  <tr  *ngFor="let row of csvData; let i = index" >
                    <td *ngFor="let item of row; let j = index"> 
                      {{row}} 
                    </td>
              </table>
      </div>   
  
      <br>
      header: 
      {{ headerRow | json }}
      csvData: 
      {{ csvData | json  }}
    </ion-item> 
  </ion-item> 
</ion-content>
2

I think it is an async problem : the data are shown before they are got…
I would try to change extrat function to an async one…

3

Its something like this?
`

async extract(){
const data = await Papa.parse(this.url, {
download: true,
complete: function(results) {
this.csvData=results.data;
this.headerRow = this.csvData[0];
this.csvData.splice(0, 1);
console.log(this.csvData);
console.log(this.headerRow);
}
});
` return data
}
what should I put in the constructor when call this.extract()? @trollanfer