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

0 0 2 minutes read

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 that 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: In this example, we will be using the map() and join() functions to convert the CSV values to strings.

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 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: In this example, we will be using the javascript loops to convert the CSV to strings.

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!