21

I want to use handlebars #each with an object that's not an array.

How do I do that? I need it to still work with meteor's special features with #each.

My object is in the form of:

{
  john: "hello",
  bob: "hi there"
}

I'm trying to get an output like this:

<div>hello</div>
<div>hi there</div>
Harry
  • 52,711
  • 71
  • 177
  • 261
  • Could you post what you're using as the object? It may not be possible if you want to get the properties of an object iterated over, but you can always use `{{item.property}}` – Tarang Feb 23 '13 at 00:18
  • @Akshat I posted my object. Thanks for your help. – Harry Feb 23 '13 at 00:47
  • 3
    **There is now built-in support for this**; see http://stackoverflow.com/q/11884960/50079 – Jon Jul 07 '13 at 22:04
  • 4
    @Jon - there is built in support in Handlebars but it's always been a problem to use that support from Meteor. Meteor plans to support it eventually but as of today does not. – foobarbecue Jun 10 '14 at 20:22

3 Answers3

37

You need to use a helper in your js to help handlebars understand your object:

Add to your client js

Template.registerHelper('arrayify',function(obj){
    var result = [];
    for (var key in obj) result.push({name:key,value:obj[key]});
    return result;
});

And use (you can also use the key with {{name}}) in your html:

{{#each arrayify myobject}}
   <div title="hover here {{name}}">{{value}}</div>
{{/each}}

myobject comes from your template:

Template.templatename.helpers({
    myobject : function() { 
      return { john:"hello", bob: "hi there" } 
    }
});
tim-phillips
  • 997
  • 1
  • 11
  • 22
Tarang
  • 75,157
  • 39
  • 215
  • 276
  • Any advantages to doing it with a handlebars helper over doing it with meteor templates? – Harry Feb 23 '13 at 01:46
  • 1
    The helper only has to be declared once to work across all templates, the template helper only works for one template so you would have to redeclare it every time. I used it in case you decide to use the object in more templates – Tarang Feb 23 '13 at 01:48
  • The API has changed, use `Template.registerHelper()` instead of `Handlebars.registerHelper()` http://docs.meteor.com/#/full/template_registerhelper – Mikael Lirbank Oct 15 '15 at 20:22
  • result = []; is there a var missing? – Johnny Chen Oct 27 '15 at 02:54
8

You can convert your object into array with underscore _.map

html:

<template name="test">
    {{#each person}}
       <div>{{greeting}}</div>
    {{/each}}
</template>

js:

Template.test.helpers({
    person : function () { 
        return _.map(object, function(val,key){return {name: key, greeting: val}});
    }
});
solo999
  • 171
  • 1
  • 4
4

It should be noted for people finding this now that the correct way to declare Handlebars helpers in Meteor as of this writing is with the UI.registerHelper method as opposed to Handlebars.registerHelper. So the above helper should look like this now:

UI.registerHelper("arrayify", function(obj){
    result = [];
    for (var key in obj){
        result.push({name:key,value:obj[key]});
    }
    return result;
});
Robert Fines
  • 700
  • 4
  • 13