Unexpected comma using map()

Question

I've an array with a list of elements and I'm trying to append this list to an HTML element using template strings:

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
      ${description.map(
        function(work) {
          return `<li>${work}</li>`
        }
      )}</ul>
  </div>
  `
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

As a result I get an unexpected comma between each list element. (You can see this when you run the code snippet above.)

How can I avoid this?

The `map()` function is ok. The problem should come from somewhere else — Weedoze, Aug 22 '17 at 08:06
Looks like you are using some kind of templating language here; which one? — CBroe, Aug 22 '17 at 08:07
I'm using plain JS (ES2015) here (just a jQuery selection to the body and to append the element). Added a snippet to the description. — Lc0rE, Aug 22 '17 at 08:10
@CBroe: Those are ES2015+ [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). — T.J. Crowder, Aug 22 '17 at 08:11

score 282 · Accepted Answer · edited Feb 04 '18 at 08:38

282

Explanation

template literals use the toString() method which by default joins the returned array by map with a ,.
To avoid this "problem" you can use join('')

Code

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
     ${
        description.map(function(work) {
          return `<li>${work}</li>`
        }).join('')
      }
    </ul>
  </div>
  `
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Feb 04 '18 at 08:38

Brandon Benefield

1,504
1
21
36

answered Aug 22 '17 at 08:11

Roman

4,922
3
22
31

1

Wow, can't believe I forgot to `join()` my array. Thanks haha! – Amit Beckenstein Apr 07 '20 at 11:11
2

I wonder how this accepted answer is in the same minutes with other below – Nurkartiko Jun 19 '20 at 09:56

score 39 · Answer 2 · answered Aug 22 '17 at 08:11

39

.map() returns an array. You probably want to return a string containing the array elements concatenated together. You can do that with .join(''):

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
      ${description.map(
        function(work) {
          return `<li>${work}</li>`
        }
      ).join('') /* added .join('') here */}</ul>
  </div>
  `
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Aug 22 '17 at 08:11

Michael Geary

28,450
9
65
75

how does map returns array? we are already telling it to return a template literal right? – Rohan Devaki Apr 17 '21 at 04:28
1

Can you clarify what you're asking? `.map` always returns an array. We can't tell it to return a template literal and aren't doing so here. – Michael Geary Apr 17 '21 at 04:52
``` ${description.map( function(work) { return `
${work}
${work}

Rohan Devaki

Apr 17 '21 at 15:46

You're looking at the `return` from the _callback_, not from `array.map` itself. The `array.map` method creates a new array, then iterates through the existing array, calls your callback function on each element, and pushes onto the new array whatever value your callback returns. Finally, it returns the new array. Here is a simple example you can try in your browser's dev tools: `let a = [5,10,15]; let b = a.map( function(x) { return -x; }); console.log(a); console.log(b);` As you can see, the `return` statement in the callback returns a number, but `map` collects all those into a new array. – Michael Geary Apr 18 '21 at 03:02

Ivar · Answer 3 · 2021-07-12T16:11:57.303

As others have pointed out (which I'm going to repeat for completeness sake), Array.prototype.map returns a new array which contains the elements that are altered in the function that is passed to it.

When you concatenate an array to a string (which is what is happening here), it will convert the array to a string as well. And when an array is converted to a string, it is automatically joined using commas.

const arr = ['<a>', '<b>'];

console.log(arr + ""); // <a>,<b>

Besides using .join() to explicitly pass an empty string as the separator, you can also replace the .map() with a Array.prototype.reduce to reduce the array to a single value.

description.reduce((acc, work) => acc + `<li>${work}</li>`, '')

So the complete code would look like this:

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
     ${
        description.reduce((acc, work) => acc + `<li>${work}</li>`, '')
      }
    </ul>
  </div>
  `
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

score 1 · Answer 4 · answered Jun 25 '21 at 02:37

1

For simple your code, i just use like this: ${description.map((work) => <li>${work}</li>).join('')}

answered Jun 25 '21 at 02:37

Erdeprof

29
2

This is better suited as a comment, rather than an answer. As it doesn't clarify on the OP`s original problem. But rather introduces different syntax. – Olga Jun 25 '21 at 12:48

Unexpected comma using map()

4 Answers4

Explanation

Code

Linked

Related