How to convert CSV string file to a 2D array of objects using JavaScript ?

11 Apr, 2022
A CSV is a comma-separated values file with a .csv extension, which allows data to be saved in a tabular format. 
In this article, we will learn to convert the data of a CSV string to a 2D array of objects, where the first row of the string is the title row using JavaScript.
Given a comma-separated values (CSV) string to a 2D array, using 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"}
        ]    
We must know some array and string prototype functions that will be helpful in this regard.
indexOf function: The String.prototype.indexOf() function finds the index of the first occurrence of the argument string in the given string and the value returned is in 0 based index.
Example:
str = 'How\nare\nyou?' 

str.indexOf('\n');
Output:
3
Slice function: The Array.prototype.slice() method returns a new array containing a portion of the array on which it is implemented and the original array remains the same.
Example: 
['a','b','c','d'].slice(1)
Output:
 ['b','c','d']
Map function: The Array.prototype.map() method returns a new array with the results of calling a provided function on every element.
Example:
arr = [2, 4, 8, 16]

// Dividing each element of the array by 2
newArr = arr.map( item => item/2) 
Output:
[1, 2, 4, 8]
Split function: The String.prototype.split() method is used to split the given string into an array of strings by separating it into substrings using a specified separator provided in the argument.
Example:
str = "Geeks for Geeks"

// Split the array when ' ' is located
arr = str.split(' ');
Output:
[ 'Geeks', 'for', 'Geeks' ]
Reduce function: The Array.prototype.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each element of the array from left to right and the return value of the function is stored in an accumulator.
Example:
 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)
Output:
20
Approach:
The JavaScript string slice() method extracts parts of a string and returns the extracted parts in a new string taking ‘\n’ as the first occurrence.
Data Values are stored using “\n” as the delimiter.
JavaScript map() function will iterate over all values of title values array and append each object at the end of the array
The “storeKeyValue” variable is used to store each key with its respective values.
Example:
Javascript
<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>
Output:
saurabh1990aror
arorakashish0911
CSV
javascript-array
JavaScript-Methods
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
JavaScript String includes() Method
Implementation of LinkedList in Javascript
DOM (Document Object Model)
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to set the default value for an HTML <select> element ?