Carregar CSV para array em JavaScript

1. Use o plugin jQuery-csv para carregar CSV para um array em JavaScript
2. Crie uma função definida pelo usuário para carregar CSV em um array em JavaScript

Um CSV é um arquivo de texto. Ele separa valores diferentes usando uma vírgula como delimitador.

Carregaremos um arquivo CSV em um array usando JavaScript neste artigo.

Use o plugin jQuery-csv para carregar CSV para um array em JavaScript

A biblioteca jQuery fornece o plugin jquery-csv que pode ler arquivos CSV em matrizes.

Por exemplo,

array = $.csv.toArrays(csv, {
  delimiter: '\'',
  separator: ';',  // Sets a custom field separator character
});

Podemos definir um caractere delimitador personalizado e um separador usando as propriedades delimiter e separator. O resultado final é armazenado em um array.

Crie uma função definida pelo usuário para carregar CSV em um array em JavaScript

Usaremos a classe FileReader para ler o arquivo CSV necessário como uma string. Para armazenar isso em um array, usaremos as funções slice(), split() e map(). A função slice() ajuda a retornar um novo array com uma parte de um array antigo no qual foi implementado. A função map() ajuda a retornar um novo array, fornecendo as funções fornecidas em cada elemento do array. As funções split() ajudam a dividir as strings em substrings na forma de um array usando um separador especificado.

Veja o código abaixo.

function csv_To_Array(str, delimiter = ',') {
  const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter);
  const row_data = str.slice(str.indexOf('\n') + 1).split('\n');
  const arr = row_data.map(function(row) {
    const values = row.split(delimiter);
    const el = header_cols.reduce(function(object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });

  // return the array
  return arr;
}

Assumimos que a primeira linha do arquivo contém os cabeçalhos. A função slice() começa do início ao primeiro índice \n e usando a função split() para dividir a string em um array baseada no delimitador. Da mesma forma, usamos essas duas funções para armazenar as linhas. Em seguida, mapeamos as linhas para um array. Usamos a função map() para dividir cada valor de uma linha em um array. A função reduce() é usada com os cabeçalhos para criar um objeto, adicionar os valores das linhas com os cabeçalhos necessários e retornar esse objeto. Este objeto é adicionado ao array. Finalmente, retornamos o array final, que é um array de objetos.