angular loop on array to create object array after parsing csv

Question

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 :

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;
}

MoxxiManagarm · Accepted Answer · 2020-10-05 07:17:55Z

2

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.

answered Oct 5, 2020 at 7:17

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Damian Over a year ago

wow thanks ! It's ok for this ! I use the second answer from @Sunny to create my object with the column header in a function mapToOperation. Thank you very much, both of you. I'll edit my answer with the final soluce

Sunny · Accepted Answer · 2020-10-05 07:25:24Z

1

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));

answered Oct 5, 2020 at 7:25

Sunny

1,49515 silver badges20 bronze badges

Collectives™ on Stack Overflow

angular loop on array to create object array after parsing csv

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related