Como Converter CSV para Array com JavaScript

O formato CSV (Comma-Separated Values) é amplamente utilizado para armazenar dados tabulares, onde os valores são separados por vírgulas.

Às vezes, é necessário converter um arquivo CSV em um formato que seja mais adequado para manipulação e processamento em JavaScript, como um array.

Neste artigo, você aprenderá como converter um arquivo CSV em um array utilizando JavaScript.

Ler o arquivo CSV 

O primeiro passo é ler o arquivo CSV. Existem várias maneiras de fazer isso em JavaScript, dependendo do ambiente em que você está trabalhando.

Uma opção comum é utilizar a API FileReader, que permite ler o conteúdo de um arquivo local.

Aqui está um exemplo de como ler o arquivo CSV utilizando a API FileReader:

function lerArquivoCSV(arquivo, callback) {
  const leitor = new FileReader();

  leitor.onload = function (evento) {
    const conteudo = evento.target.result;
    callback(conteudo);
  };

  leitor.readAsText(arquivo);
}

const inputArquivo = document.getElementById('arquivoCSV');

inputArquivo.addEventListener('change', function (evento) {
  const arquivo = evento.target.files[0];

  lerArquivoCSV(arquivo, function (conteudo) {
    // Aqui você pode prosseguir para o próximo passo
  });
});

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Converter o CSV em Array 

Após ler o arquivo CSV, o próximo passo é converter o conteúdo em um array. Existem várias abordagens para realizar essa conversão, mas uma forma comum é utilizando o método split() para dividir o conteúdo em linhas e, em seguida, iterar sobre as linhas para separar os valores em cada linha.

Aqui está um exemplo de como converter o conteúdo CSV em um array:

function converterCSVparaArray(conteudoCSV) {
  const linhas = conteudoCSV.split('\n');
  const arrayCSV = [];

  linhas.forEach(function (linha) {
    const valores = linha.split(',');
    arrayCSV.push(valores);
  });

  return arrayCSV;
}

lerArquivoCSV(arquivo, function (conteudo) {
  const arrayCSV = converterCSVparaArray(conteudo);
  console.log(arrayCSV);
});

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Utilizar o Array de Dados

Agora que você tem o array contendo os dados do CSV, você pode utilizá-lo da maneira que desejar. Por exemplo, você pode iterar sobre as linhas e acessar os valores individualmente, realizar operações de filtragem ou transformação nos dados, entre outras possibilidades.

Aqui está um exemplo simples de como iterar sobre as linhas do array CSV:

arrayCSV.forEach(function (linha) {
  console.log(linha);
});

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Conclusão

Converter um arquivo CSV para um array em JavaScript é uma tarefa útil quando você precisa manipular e processar os dados contidos no CSV.

Neste artigo, você aprendeu como ler um arquivo CSV utilizando a API FileReader e como converter o conteúdo CSV em um array utilizando o método split().

Agora você pode utilizar esses conceitos para lidar com arquivos CSV e extrair informações relevantes para suas aplicações JavaScript.