Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 26 Apr, 2021
Geek Week

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 row
var 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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :