Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Análise de arquivo CSV com JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Kaique Silva (you can also view the original English article)

Final product image
What You'll Be Creating

Análise de arquivo CSV com JavaScript

Final product image
O que você estiver criando

O arquivo no formato CSV (Valores separado por virgula) é uma maneira popular de troca de dados entre aplicações

Com esta dica, você vai aprender bem como utilizar o JavaScript para visualizar dados de arquivos do tipo CSV.

Criando um arquivo CSV

Para iniciarmos, vamos criar um arquivo CSV bem simples. Para fazer, vamos utilizar o Mockaroo, que é uma ferramenta online para gerar dados. Aqui esta nosso arquivo:

Initial-CSV-File

Convertendo um arquivo CSV em uma tabela HTML

construindo uma table HTML associada.

Como primeiro passo, nós utilizaremos a função ajax presente no jQuery para recuperar dados do arquivo:

Assumindo que a requisição do tipo AJAX foi efetuada com sucesso, quando a função successFunction foi executada. Esta função é responsável por analisar o dado retornado e transforma-lo em uma tabela HTML:

Então, a ideia de converter cada linha do arquivo CSV em uma linha de tabela. Com isto em mente, vamos a uma breve explicação sobre o funcionamento do código acima:

  • Primeiro, nós utilizamos uma regex para separar a resposta AJAX, e separamos em linhas do CSV.
  • Na sequência, nós iteramos através de linhas do CSV e separamos em campos.
  • Finalmente, nós rondamos os campos e criamos as células correspondentes.

Logo adiante, para chegar a um entendimento relacionado a este código, consideramos a seguinte visualização:

CSV-Representation

Neste ponto, é importante evidenciar o porque nós utilizamos o padrão regex "/\r\n|\r/" para separa em linhas o conteúdo CSV.

Sabemos que é provável, que tenhamos diferentes representações de uma nova linha através do sistema operacional. Por exemplo, em plataformas Windows os caracteres que representam uma nova linha são \r\n. Ele diz, que usando a regex acima, nós estaremos aptos a identificar estas possíveis representações.

Em adição, muitos editores de texto permitem que nós escolhamos um formato de nova linha. Tome, como premissa, o Notepad++. Neste editor, nós podemos especificar que o formato desejado para um documento pela navegação para este caminho:

Notepad++-EOL

Para que isto seja ilustrado, considere nosso arquivo. Dependendo do formato que escolhemos, ele sera bastante semelhante a este:

CSV-EOL

Adicionando estilos a tabela HTML

Antes nós olhamos para a tabela resultante, vamos adicionar alguns estilos básicos:

Aqui esta a tabela gerada:

Generated-Table

Conclusão

Neste pequeno artigo, nós passamos por um processo de conversão de um arquivo CSV em uma tabela HTML. Fatídico, nós utilizamos uma ferramenta baseada nesta conversão, acho que isto sempre sera mais desafiador para alcançar isto escrevendo seu próprio código.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.