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:
.png)
