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

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:

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:

1	$.ajax({
2	url: 'csv_data.csv',
3	dataType: 'text',
4	}).done(successFunction);

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:

	  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(table);
      }

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:

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:

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

Adicionando estilos a tabela HTML

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

	  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }     

Aqui esta a tabela gerada:

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!