¿Cómo convertir un archivo de string CSV en una array 2D de objetos usando JavaScript?

Un CSV es un archivo de valores separados por comas con una extensión .csv , que permite guardar los datos en un formato tabular. 

En este artículo, aprenderemos a convertir los datos de una string CSV en una array 2D de objetos, donde la primera fila de la string es la fila del título usando JavaScript .

Dada una string de valores separados por comas (CSV) a una array 2D, usando JS.f

Input: 'Name,Roll Number\nRohan,01\nAryan,02' 

Output:  [
             {Name: "Rohan", Roll Number: "01"},
             {Name: "Aryan", Roll Number: "02"}
        ]
// With delimiter ;    
    
Input: 'Name;Roll Number\nRohan;01\nAryan;02' 
        
Output:    [
             {Name: "Rohan", Roll Number: "01"},
             {Name: "Aryan", Roll Number: "02"}
        ]    

Debemos conocer algunas funciones prototipo de array y string que serán útiles en este sentido.

Función indexOf: la función String.prototype.indexOf() encuentra el índice de la primera aparición de la string de argumento en la string dada y el valor devuelto está en el índice basado en 0.

Ejemplo:

str = 'How\nare\nyou?' 

str.indexOf('\n');

Producción:

3

Función Slice: el método Array.prototype.slice() devuelve una nueva array que contiene una parte de la array en la que se implementa y la array original sigue siendo la misma.

Ejemplo: 

['a','b','c','d'].slice(1)

Producción:

 ['b','c','d']

Función de mapa: el método Array.prototype.map() devuelve una nueva array con los resultados de llamar a una función proporcionada en cada elemento.

Ejemplo:

arr = [2, 4, 8, 16]

// Dividing each element of the array by 2
newArr = arr.map( item => item/2) 

Producción:

[1, 2, 4, 8]

Función de división: el método String.prototype.split() se usa para dividir la string dada en una array de strings al separarla en substrings usando un separador específico proporcionado en el argumento.

Ejemplo:

str = "Geeks for Geeks"

// Split the array when ' ' is located
arr = str.split(' ');

Producción:

[ 'Geeks', 'for', 'Geeks' ]

Función de reducción: el método Array.prototype.reduce() en JavaScript se usa para reducir la array a un solo valor y ejecuta una función proporcionada para cada elemento de la array de izquierda a derecha y el valor de retorno de la función se almacena en un acumulador.

Ejemplo:

 arr = [2,4,6,8]
 
 // Here 0 is the initial value of the accumulator
 // while traversing, currentValue has been added
 
 arr.reduce(function(accumulator,currentValue){
     return accumulator+currentValue;
 },0)

Producción:

20

Acercarse:

• El método JavaScript string slice() extrae partes de una string y devuelve las partes extraídas en una nueva string tomando ‘\n’ como la primera aparición.
• Los valores de datos se almacenan utilizando «\n» como delimitador.
• La función map() de JavaScript iterará sobre todos los valores de la array de valores de título y agregará cada objeto al final de la array
• La variable “storeKeyValue” se utiliza para almacenar cada clave con sus respectivos valores.

Ejemplo:

<script>
 
    function CSVstring_to_Array(data, delimiter = ',') {
 
        /* This variable will collect all the titles
           from the data variable
           ["Name", "Roll Number"] */
         
        const titles = data.slice(0, data
            .indexOf('\n')).split(delimiter);
 
        /* This variable will store the values
           from the data
           [ 'Rohan,01', 'Aryan,02' ] */
        const titleValues = data.slice(data
            .indexOf('\n') + 1).split('\n');
 
        /* Map function will iterate over all
           values of title values array and
           append each object at the end of
           the array */
        const ansArray = titleValues.map(function (v) {
 
            /* Values variable will store individual
               title values        
               [ 'Rohan', '01' ] */
            const values = v.split(delimiter);
 
            /* storeKeyValue variable will store
               object containing each title
               with their respective values i.e
               { Name: 'Rohan', 'Roll Number': '01' } */
            const storeKeyValue = titles.reduce(
                function (obj, title, index) {
                    obj[title] = values[index];
                    return obj;
                }, {});
 
            return storeKeyValue;
        });
 
        return ansArray;
    };
 
    var inputString1 = "Name,Roll Number\nRohan,01\nAryan,02";
    console.log(CSVstring_to_Array(inputString1));
 
    var inputString2 = "Name;Roll Number\nRohan;01\nAryan;02";
    console.log(CSVstring_to_Array(inputString2,';'));
</script>

Producción: