CODEWITHSUNDEEP
arraysangularcsvparsingforeach
Damian
Damian

Reputation: 141

angular loop on array to create object array after parsing csv

I try to load a csv file on a object array to put it in a table, with angular.
I success to parse my csv file and actually obtain this structure :

  this.fileToUpload = files.item(0);

  // Parse the file 
  this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ';' })
    .pipe().subscribe((result: any[]) => {

    console.log('Result', result);
    //here result is ok,2 lines
    result.forEach(row => {

      //here how to put my row in a operation object ? 

    });
  
    this.operations = result;
    console.log('operations ' + JSON.stringify(this.operations));

when I log the result I have this : enter image description here

and the log for operations is :

    operations [{"Date operation":"30/09/2020","Date valeur":"01/10/2020","Libelle":"SOUSCRIPTION 
    PARTS  SOCIALES","Debit":"15","Credit":""},{"Date operation":"02/10/2020","Date 
    valeur":"02/10/2020","Libelle":"TEST","Debit":"","Credit":"1900"}]

The question is how to loop on result to put each row in a operation object ? Is there a way to use index of columns in result ? the structure of operation object is this one :

    export class Operation {
      date: string;
      categorie: string;
      libelle: string;
      debit: string;
      credit: string; 
    }

I think a pb is that the first line of csv file doesnt contains the sames labels that my operation object. Example :

    date operation <> date and libelle <> Libelle ?

Thanks for your help !

Jeff

EDIT : the final soluce :

     onFileChange(files: FileList) {
if (files && files.length) {
  this.labelImport.nativeElement.innerText = files.item(0).name;
  this.fileToUpload = files.item(0);

  // Parse the file you want to select for the operation along with the configuration
  this.ngxCsvParser.parse(files[0], {header: this.header, delimiter: ';'})
    .pipe().subscribe((result: any[]) => {

    this.operations = result.map(resultEntry => mapToOperations(resultEntry));


  });
}

function mapToOperations(resultEntry: any) {

  const operation = {} as Operation;
  operation.date = resultEntry['Date operation'];
  operation.credit = resultEntry['Credit'];
  operation.libelle = resultEntry['Libelle'];
  operation.debit = resultEntry['Debit'];

  return operation;
}

Upvotes: 2

Views: 1190

Answers (2)

Sunny
Sunny

Reputation: 1456

You should use the for..of loop here which is best to iterate an array.

this.fileToUpload = files.item(0);

  // Parse the file 
  this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ';' })
    .pipe().subscribe((result: any[]) => {

    console.log('Result', result);
    //here result is ok,2 lines
for (let u of result){
console.log(u)
u['date'] = u['Date operation'];
u['libelle'] = u['Libelle'];
u['debit'] = u['Debit'];
u['credit'] = u['Credit'];

// here you firstly need add row you wanted then assign this result to operation object

}
  
  
    this.operations = result;
    console.log('operations ' + JSON.stringify(this.operations));

Upvotes: 1

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

You need to map your result.

// Parse the file 
this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ';' })
  .subscribe((result: any[]) => {
    this.operations = result.map(resultEntry => mapToOperations(resultEntry));
  });

mapToOperation is a placeholder for a function you need to create. This function takes a result entry and creates an operations object with it.

Upvotes: 2

Related Questions