Access values using {{#each}} in a one dimensional array

javascript arrays handlebars.js template-engine

{{#each skills}}  <li>{{this}}</li>{{/each}}

javascript arrays handlebars.js template-engine

An array of scalar values should make use of the Simple Iterators grammar. You need to declare an #each block on the skills property.

The placeholder for each value can be either {{this}} or {{.}}.

You need to use the following template:

{{#each skills}}    <li>{{this}}</li>{{/each}}

Alternatively, you can use #list.

{{#list skills}}    <li>{{.}}</li>{{/list}}

Example

function listToHTML(items) {  return '<ul>' + items.map(function(item) {    return '<li>' + item + '</li>';  }).join('') + '</ul>';}Handlebars.registerHelper({  scalar_list_raw : function(items) {    return listToHTML(items);  },    scalar_list_safe_string: function(items) {    return new Handlebars.SafeString(listToHTML(items));  },});var data = {  skills: [ 'Design', 'Development', 'HTML5', 'CSS', 'JavaScript' ],};$(function() {  var source = $("#skills-template").html();  var template = Handlebars.compile(source);  $('body').append(template(data));});

ul li {  list-style-type: upper-roman;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script><script id="skills-template" type="text/x-handlebars-template">  <h2>Skills - [Block] Each</h2>  <ul>    {{#each skills}}    <li>{{this}}</li>    {{/each}}  </ul>  <h2>Skills - [Helper] SafeString</h2>  {{scalar_list_safe_string skills}}  <h2>Skills - [Helper] Raw HTML</h2>  {{{scalar_list_raw skills}}}</script>

Expand snippet