Create a comma separated list from an array in JavaScript
Here is a need to convert an array into an object. To do so we are going to use a few of the most preferred methods. First here is a method to know.
- Array join() method
This method joins the elements of the array to form a string and returns the new string.
The elements of the array will be separated by a specified separator. If not specified, Default separator comma (, ) is used.
Syntax:array.join(separator)
Parameters:
- separator:This parameter is optional. It specifies the separator to be used. If not used, Separated Comma(, ) is used.
Return value:
A String, containing the array values, separated by the specified separator. - Array toString() method
This method converts an array into a String and returns the new string.
Syntax:array.toString()
Return value:
It returns a string which represents the values of the array, separated by a comma.
Example-1: This example joins the element of the array by join() method using comma(, ).
<!DOCTYPE html> < html > < head > < title > JavaScript | Create comma separated list from an array. </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 16px; font-weight: bold;"> </ p > < button onclick = "gfg_Run()" > click here </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var arr = ["GFG1", "GFG2", "GFG3"]; el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' + arr[1] + '", ' + arr[2] + '"' + ']';; function gfg_Run() { el_down.innerHTML = "Comma separates list = " + arr.join(", "); } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-2:This example uses the toString() method to convert an array into a comma separated list.
<!DOCTYPE html> < html > < head > < title > JavaScript | Create comma separated list from an array. </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 16px; font-weight: bold;"> </ p > < button onclick = "gfg_Run()" > click here </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var arr = ["GFG1", "GFG2", "GFG3"]; el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' + arr[1] + '", ' + arr[2] + '"' + ']';; function gfg_Run() { el_down.innerHTML = "Comma separates list = " + arr.toString(); } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-3:This example uses the normal array name and do the same work.
<!DOCTYPE html> < html > < head > < title > JavaScript | Create comma separated list from an array. </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 16px; font-weight: bold;"> </ p > < button onclick = "gfg_Run()" > click here </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var arr = ["GFG1", "GFG2", "GFG3"]; el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' + arr[1] + '", ' + arr[2] + '"' + ']';; function gfg_Run() { el_down.innerHTML = "Comma separates list = " + arr; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button: