Unexpected comma using map()

by

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>

More Related Contents:

  1. Backticks (`…`) calling a function in JavaScript
  2. Defer execution for ES6 Template Literals
  3. Can ES6 template literals be substituted at runtime (or reused)?
  4. javascript extract certain properties from all objects in array
  5. Why are Objects not Iterable in JavaScript?
  6. Is there a downside to using ES6 template literals syntax without a templated expression?
  7. Create object from array
  8. Filtering an array with a function that returns a promise
  9. How to generate range of numbers from 0 to n in ES2015 only?
  10. How to find duplicate values in a JavaScript array of objects, and output only unique values?
  11. Using Array objects as key for ES6 Map
  12. Convert ES6 Iterable to Array
  13. Get list of duplicate objects in an array of objects
  14. Array map function doesn’t change elements
  15. Extract certain properties from all objects in array
  16. What does this `…${…}…` code in the node docs mean? [duplicate]
  17. Template literals syntax is not working in IE11
  18. What is the purpose of template literals (backticks) following a function in ES6?
  19. Wrap long template literal line to multiline without creating a new line in the string
  20. spread operator vs array.concat()
  21. Replace element at specific position in an array without mutating it
  22. Find all values by specific key in a deep nested object
  23. How to create an array of objects from multiple arrays
  24. Array.from() vs spread syntax
  25. How to delete property from spread operator?
  26. How to call native es6 template string replacement from tag function?
  27. Compare two Arrays with Objects and create new array with unmatched objects
  28. Using Node.js require vs. ES6 import/export
  29. TypeScript enum to object array
  30. Re-export default in ES 6 modules

Leave a Comment