How to convert a 2D array to a comma-separated values (CSV) string in JavaScript ? - GeeksforGeeks

26 Apr, 2021
Given a 2D array, we have to convert it to a comma-separated values (CSV) string using JS.
Input:
[ [ "a" , "b"] , [ "c" ,"d" ] ]
Output:
"a,b 
 c,d"
Input:
[ [ "1", "2"]
["3", "4"]
["5", "6"] ]
Output:
"1,2
3,4
5,6"
To achieve this, we must know some array prototype functions which will be helpful in this regard:
Join function: The Array.prototype.join( ) function is used to join all the strings in an array with a character/string.
Example:
[ "a","b"].join( ",") will result in : "a,b"
Map function: The Array.prototype.map() returns a new array with the results of calling a function which we provide, on each element.
Example:
arr= ["a","b"]

// Adding "c" to each element
newArray = arr.map( item => item + "c") 
value of newArray = ["ac", "bc"]
Approach: We will use the map function and join function to combine each 1D row into a string with the separation of a comma. and then join all the individual strings with “\n”, using the join function.
Example:
Javascript
<script>// Create CSV file data in an array  var array2D = [                 [ "a" , "2"] ,                [ "c" ,"d" ]               ];  // Use map function to traverse on each rowvar csv = array2D  .map((item) => {        // Here item refers to a row in that 2D array    var row = item;          // Now join the elements of row with "," using join function    return row.join(",");  }) // At this point we have an array of strings  .join("\n");      // Join the array of strings with "\n"console.log(csv);</script>
Output:
a,2
c,d
Explanation: We first used the map function on the 2D array to traverse on each row, then we used the join function to join the array of elements in that row using a comma. Next, that map function returns an array of strings, which we join by using “\n”.  Thus resulting in a CSV string.
Alternative Approach: We can even use for loops to traverse in the array, instead of a map.
Example:
Javascript
<script>var csv="";create CSV file data in an array  var array2D = [                 [ "a" , "2"] ,                [ "c" ,"d" ]               ];  for (var index1 in array2D) {  var row = array2D[index1];      // Row is the row of array at index "index1"  var string = "";      // Empty string which will be added later  for (var index in row) {    // Traversing each element in the row    var w = row[index];          // Adding the element at index "index" to the string    string += w;    if (index != row.length - 1) {      string += ",";      // If the element is not the last element , then add a comma    }  }  string += "\n";      // Adding next line at the end  csv += string;  // adding the string to the final string "csv"}console.log(csv);</script>
Output:
a,2
c,d
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.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?