Javascript - map(function) return this.value - comma on wrong side

Question

I use this code for listing all checked values in the array:

   var healthSafety = $('input:checkbox[name=health_safety]:checked').map(function() {
    return this.value + (' ');
   }).get();

but the problem is, that comma, which separates them falls in the wrong place.

I get something like:

Tripple ladders ,Skylight ,Access to roof

but I want something like this:

Tripple ladders, Skylight, Access to roof.

I tried to put:

   return this.value + (' ');

but it didn't helped

Is any way to fix it?

Where is the comma character even coming from? Is it already in the value from the checkbox? Can you provide a [mcve] demonstrating the problem? — David, Jul 15 '21 at 16:14
@David I expect the comma is the result of converting an array to a string. — Jamiec, Jul 15 '21 at 16:15
if you `return this.value + (' ');` an empty space will be added after the value, if you want it before, you *could* `return ' ' + this.value;` but what you really **should** do is something like: `var healthSafety = $('input:checkbox[name=health_safety]:checked').map(function() { return this.value }).get().join(', ')` — secan, Jul 15 '21 at 16:18

score 5 · Accepted Answer · answered Jul 15 '21 at 16:15

You're relying on implicit join, which puts a comma after each item, but your items (once you update them) end with a space.

Do an explicit join instead with the separator you want:

var healthSafety = $('input:checkbox[name=health_safety]:checked')
    .map(function() { return this.value; })
    .get()
    .join(", ");

or perhaps

const healthSafety = $('input:checkbox[name=health_safety]:checked')
    .get()
    .map(({value}) => value)
    .join(", ");

score 3 · Answer 2 · answered Jul 15 '21 at 16:16

In your question, you are viewing the default serialization of your array, which only uses a single-character , as a separator. You're trying to add spaces to the separation by adding them to the values.

But you don't want the values to include spaces: that will result in an extra space either at the beginning or ending of the string. Instead, you want to serialize the array with the two-character separator , (comma + space). You can perform this serialization with join:

$('...').map(function() {
    return this.value;
}).get().join(", ");

score 1 · Answer 3 · answered Jul 15 '21 at 16:20

You didn't post the offending code, but somewhere you're stringifying an array, which automatically concatenates all of the elements with a comma:

console.log(['a', 'b', 'c']); //-> "a,b,c"

In your case, you're adding a space to the end of each value, so you're ending up with something like this:

console.log(['value1 ', 'value2 ', 'value3 ']); //-> "value1 ,value2 ,value3 "

What you want to do is remove the extra space as you currently have it and then call .join(', ') on the array - notice the extra space after the comma:

console.log(['value1', 'value2', 'value3'].join(', ')); //-> "value1, value2, value3"

You can join the array with any string:

console.log(['value1', 'value2', 'value3'].join('.:::.')); //-> "value1.:::.value2.:::.value3"

Javascript - map(function) return this.value - comma on wrong side

3 Answers3

Linked