How to iterate an object with Handlebars?

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 an object like:

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

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

Is there any method to iterate an object with Handlebars.js? Or do I have to restructure the object like:

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

possible duplicate of [Handlebars/Mustache - Is there a built in way to loop through the properties of an object?](http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of) — Jon, Dec 20 '13 at 11:48
Future visitors: There is now built-in support for iterating a map in Handlebars. The linked question has the details. — Jon, Dec 20 '13 at 11:49

score 27 · Answer 1 · answered Jul 13 '16 at 14:45

27

This is now supported with:

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

answered Jul 13 '16 at 14:45

Tasos Zervos

526
1
6
8

This is the modern answer. The accepted answer is now OBE – Jim Sep 19 '18 at 13:31
To avoid value escaping use 'triple-stash' operator: **{{{this}}}** – Dimitar II Nov 19 '18 at 19:16
How do I print the values alone? There seem to be no @value "magic" variable. – ed22 Feb 24 '21 at 02:29
@ed22 just don't print the `@key`... – rnevius Apr 05 '22 at 14:35

score 13 · Accepted Answer · answered Sep 11 '13 at 17:32

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}}

score 5 · Answer 3 · answered Oct 02 '18 at 19:55

5

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.

answered Oct 02 '18 at 19:55

nimrodm

23,081
7
58
59

Good find! This should now be the accepted answer for the question. – Roben Oct 09 '18 at 11:01

score 2 · Answer 4 · answered May 09 '12 at 20:25

2

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

answered May 09 '12 at 20:25

Micha Roon

3,957
2
30
48

how do u use it in the template `{{#eachInMap mapObject}}
mapObject.value
{{/eachInMap}}` something like this ?? – Khizar Apr 11 '13 at 07:41
this is from the handlebars documentation http://handlebarsjs.com/block_helpers.html – Micha Roon Apr 12 '13 at 07:30

score 2 · Answer 5 · answered Sep 03 '15 at 05:32

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>

score 1 · Answer 6 · answered Jun 13 '17 at 09:00

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‌!

How to iterate an object with Handlebars?

6 Answers6

Linked

Related