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.
<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.
<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