Is there any method to iterate a map with Handleba

Question

It is easy to iterate an array with Handlebars.js like:

{{#each comments}}
<div class="comment">
  <h2>{{title}}</h2>
  {{{{url}}}
</div>
{{/each}}

and an array like:

{
  comments: [
   { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" },
   { url: "http://www.sproutcore.com/block", title: "SproutCore Blog" }, 
  ]
}

But I don't find a method to iterate a map like:

{
  headers: { 
     "Host": "www.example.com", 
     "Location": "http://www.example.com",

     ... Much more map items ... 
  }
}

Is there any method to iterate a map with Handlebars.js? Or I have to restructurate the object like:

{
  headers: [
   { key: "Host", value: "www.example.com" },
   { key: "Location", value: "http://www.example.com" }, 
  ]
}

Answer 1

Recent versions of Handlebars.js support a more readable iteration format (see here):

{{#each object as |value key|}}
    {{key}} => {{value}}
{{/each}}

In my opinion this is less surprising than introducing the @key syntax as suggested by Tasos Zervos' answer.

Answer 2

The answer above is in the right track, this is my refinement:

Handlebars.registerHelper( 'eachInMap', function ( map, block ) {
   var out = '';
   Object.keys( map ).map(function( prop ) {
      out += block.fn( {key: prop, value: map[ prop ]} );
   });
   return out;
} );

And to use it:

{{#eachInMap myMap}}
key:{{key}} value: {{value}}
{{/eachInMap}}

Answer 3

This is now supported with:

{{#each headers}}
    Key: {{@key}}, Value: {{this}}
{{/each}}

Answer 4

all you have to do is register a helper like so:

Handlebars.registerHelper( 'eachInMap', function ( map, block ) {
   Object.keys( myObj ).map(function( prop ) {
       return block( myObj[ prop ] );
   });
} );

in your template you can call that:

{{#eachInMap mapObject}}
some HTML and other stuff
{{/eachInMap}}

that's it. Hope it is of any use

Answer 5

A more complete example for use with Map() - with supporting functions taken from handlebars - which will allow block vars inside the eachOfMap to work.

    function appendContextPath(contextPath, id) {
      return (contextPath ? contextPath + '.' : '') + id;
    }

    function blockParams(params, ids) {
      params.path = ids;
      return params;
    }

    Handlebars.registerHelper('eachOfMap', function (map, options) {
      let contextPath;
      if (options.data && options.ids) {
        contextPath = appendContextPath(options.data.contextPath, options.ids[0]) + '.';
      }

      let data = Handlebars.createFrame(options.data);

      var out = '';
      for (let [key, item] of map) {
        data.key = key;
        if (contextPath) {
          data.contextPath = contextPath+key;
        }
        // out += block.fn({"key": key, "value": item});
        out = out + options.fn(item, {
          data: item,
          blockParams: blockParams([item, key], [contextPath + key, null])
        });
      }
      return out;
    })

Usage:

    let dataAsMap = new Map([["keyOne", {name: "bob", age: 99}], ["keyTwo", {name: "alice", age: 99}]]);

    {{#eachOfMap (dataAsMap)}}
      <li>
        {{> "fragments/childTemplate"}}
      </li>
    {{/eachInMap}}

    <span>Hey {{name}}, you're {{age}} years </span>

Answer 6

In case someone landed to this question while googling for a way to iterate ES6 Map in Handlebars, here is a helper:

Handlebars.registerHelper('eachInMap', (map, block) => {
  let output = '';

  for (const [ key, value ] of map) {
    output += block.fn({ key, value });
  }

  return output;
});

 
Example, demonstrating Map initialization and iteration:

const map = new Map([['name', 'Nicholas'], ['age': 25]]);

ES6 Map initialization sample from Understanding ECMAScript 6 book by Nicholas C. Zakas.

 
Use new helper in your Handlebars.js template:

{{#eachInMap map}}
  key: {{ key }}, value: {{ value }}
{{/eachInMap}}

Now you're all set to iterate over native ES6 Map in Handlebars‌!