Cargar CSV a array en JavaScript

Siddharth Swami 12 octubre 2023
  1. Utilice el complemento jQuery-csv para cargar CSV en un array en JavaScript
  2. Cree una función definida por el usuario para cargar CSV en un array en JavaScript
Cargar CSV a array en JavaScript

Un CSV es un archivo de texto. Separa diferentes valores usando una coma como delimitador.

Cargaremos un archivo CSV en un array usando JavaScript en este artículo.

Utilice el complemento jQuery-csv para cargar CSV en un array en JavaScript

La biblioteca jQuery proporciona el complemento jquery-csv que puede leer archivos CSV en matrices.

Por ejemplo,

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

Podemos establecer un carácter delimitador personalizado y un separador usando las propiedades delimiter y separator. El resultado final se almacena en un array.

Cree una función definida por el usuario para cargar CSV en un array en JavaScript

Usaremos la clase FileReader para leer el archivo CSV requerido como una cadena. Para almacenar esto en un array, usaremos las funciones slice(), split() y map(). La función slice() ayuda a devolver una nueva matriz con una parte de un array antigua en la que está implementada. La función map() ayuda a devolver una nueva matriz proporcionando las funciones proporcionadas en cada elemento del array. Las funciones split() ayudan a dividir las cadenas en subcadenas en forma de array utilizando un separador específico.

Vea el código a continuación.

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;
}

Suponemos que la primera línea del archivo contiene los encabezados. La función slice() comienza desde el principio hasta el primer índice \n y usa la función split() para dividir la cadena en un array basada en el delimitador. De manera similar, usamos estas dos funciones para almacenar las filas. A continuación, asignamos las filas a un array. Usamos la función map() para dividir cada valor de una fila en un array. La función reduce() se usa con los encabezados para crear un objeto, agregar los valores de las filas con los encabezados necesarios y devolver este objeto. Este objeto se agrega a el array. Finalmente, devolvemos el array final, que es un array de objetos.

Artículo relacionado - JavaScript Array