Oi Thiago, tudo bem?
Desculpe a demora em retornar.
Entendo sua dificuldade em listar dados de um arquivo CSV no Angular, mas fique tranquilo, existem algumas formas de realizar essa tarefa.
Uma opção é utilizar a biblioteca Papa Parse, que é uma biblioteca de análise de CSV em JavaScript, capaz de lidar com arquivos grandes e complexos. Essa biblioteca pode ser instalada via npm e importada no seu componente Angular, conforme exemplo abaixo:
npm install papaparse
import { Component } from '@angular/core';
import * as Papa from 'papaparse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
csvData: any[] = [];
headerRow: any[] = [];
constructor() {
let csvFilePath = './assets/data.csv';
let options = {
delimiter: ',', // delimitador do arquivo CSV
header: true, // informa que a primeira linha é o cabeçalho
skipEmptyLines: true, // pula linhas vazias
complete: (results, file) => {
console.log('Parsed: ', results);
this.headerRow = results.meta.fields;
this.csvData = results.data;
}
};
Papa.parse(csvFilePath, options);
}
}
No exemplo acima, importamos a biblioteca Papa Parse e utilizamos seu método parse
para ler o arquivo CSV. Definimos algumas opções, como o delimitador do arquivo, informamos que a primeira linha é o cabeçalho e pulamos linhas vazias. No método complete
, definimos o que deve ser feito após a leitura do arquivo. Neste caso, salvamos o cabeçalho e os dados em variáveis para exibir na tela.
Outra opção é utilizar a biblioteca CSV-Parser, que é uma outra biblioteca de análise de CSV em JavaScript. Ela pode ser instalada via npm e importada no seu componente Angular, conforme exemplo abaixo:
npm install csv-parser
import { Component } from '@angular/core';
import * as csvParser from 'csv-parser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
csvData: any[] = [];
headerRow: any[] = [];
constructor() {
let csvFilePath = './assets/data.csv';
let stream = fs.createReadStream(csvFilePath);
stream.pipe(csvParser())
.on('headers', (headers) => {
console.log(`CSV headers: ${headers}`);
this.headerRow = headers;
})
.on('data', (data) => {
console.log(`CSV data: ${JSON.stringify(data)}`);
this.csvData.push(data);
})
.on('end', () => {
console.log('CSV file successfully processed');
});
}
}
No exemplo acima, importamos a biblioteca CSV-Parser e utilizamos seu método pipe
para ler o arquivo CSV. Em seguida, definimos o que deve ser feito após a leitura do arquivo. No evento headers
, salvamos o cabeçalho em uma variável. No evento data
, salvamos cada linha de dados em uma variável para exibir na tela. E no evento end
, definimos o que deve ser feito após o final da leitura do arquivo.
Espero que essas opções possam te ajudar.
Um abraço e bons estudos.