O formato de ficheiro CSV (Comma Separated Values) é uma forma popular de troca de dados entre aplicações. Nesta dica rápida, vamos aprender como o JavaScript pode nos ajudar a visualizar os dados de um arquivo CSV.
Criando um arquivo CSV
Para começar, vamos criar um arquivo CSV simples. Para isso, vamos aproveitar o Mockaroo, um gerador de dados de teste online. Aqui está o nosso ficheiro:
Convertendo um ficheiro CSV para uma tabela HTML
Agora que tenhamos gerado o ficheiro, estamos prontos para analisá-lo e construir uma tabela HTML associada.
Como primeiro passo, vamos usar a função jQuery’s ajax para recuperar os dados deste ficheiro:
$.ajax({ url: 'csv_data.csv', dataType: 'text', }).done(successFunction);
Assumindo que a requisição AJAX é bem sucedida, o successFunction é executado. Esta função é responsável por analisar os dados retornados e transformá-los em uma tabela HTML:
A idéia é converter cada uma das linhas do CSV em uma linha da tabela. Com isso em mente, vamos explicar brevemente como o código acima funciona:
- Primeiro, usamos um regex para dividir a resposta AJAX, e assim separar as linhas do CSV.
- Então, iteramos através das linhas do CSV e dividimos seus campos de dados.
- Finalmente, fazemos loop através dos campos de dados e criamos as células da tabela correspondente.
Outras vezes, para entender melhor este código, considere a seguinte visualização:
Neste ponto, é importante esclarecer porque usamos a /\r?\n|\r/ regex para dividir as linhas do CSV.
Como você provavelmente já sabe, existem diferentes representações de uma nova linha através dos sistemas operacionais. Por exemplo, em plataformas Windows, os caracteres que representam uma nova linha são \r\n. Dito isto, usando o regex acima, somos capazes de combinar todas essas representações possíveis.
Além disso, a maioria dos editores de texto nos permite escolher o formato para uma nova linha. Veja, por exemplo, o Notepad++. Neste editor, podemos especificar o formato desejado para um documento navegando para este caminho:
Para ilustrá-lo, considere o nosso ficheiro. Dependendo do formato escolhido, ele se pareceria assim:
Adicionando Estilos à Tabela HTML
Antes de olharmos para a tabela resultante, vamos adicionar alguns estilos básicos a ela:
Aqui está a tabela gerada:
Como analisar um ficheiro CSV com a Papa Parse Library
Aqui está a tabela gerada:
Como analisar um ficheiro CSV com a Papa Parse Library
Aqui está a tabela gerada:
Como analisar um ficheiro CSV com a Papa Parse Library Papa Parse é um parser CSV realmente poderoso que fornece muitas opções de configuração, e você poderia usá-lo também para arquivos CSV realmente grandes.
A biblioteca Papa Parse está disponível em npm, e se você não quiser usar npm, você pode baixar o pacote oficial do Papa Parse npm do unpkg.
Como funciona
O exemplo seguinte demonstra como é fácil analisar uma string CSV.
var results = Papa.parse(data); // data is a CSV string
>A variável results contém o seguinte conteúdo.
Como pode ver, Results.data contém um array de todas as linhas. Se houver algum erro durante a análise, eles estarão em Results.errors. Finalmente, você pode usar Results.meta para acessar meta informação sobre a string CSV.
Por outro lado, se você quiser analisar diretamente um arquivo CSV local, você pode passar um objeto de arquivo JavaScript:
Papa.parse(fileInput.files, { complete: function(results) { console.log(results); }});
E você também pode passar na URL para um arquivo CSV remoto:
Papa.parse(url, { download: true, complete: function(results) { console.log(results); }});
Uma parte do analisador básico, Papa Parse fornece muitas outras características como:
- streaming de ficheiros grandes (para que os possa processar linha a linha)
- reverse parsing (para emitir CSV a partir de um objecto JavaScript)
- jQuery integration
- e mais
Eu encorajo-o a explorar esta biblioteca uma vez que é realmente poderosa e fácil de usar!
Conclusão
Neste pequeno artigo, passamos pelo processo de conversão de um arquivo CSV em uma tabela HTML. Claro, poderíamos ter usado uma ferramenta baseada na web para essa conversão, mas acho que é sempre mais desafiador conseguir isso escrevendo seu próprio código.