Meteor and handlebars #each to iterate over object

Question

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>

Answer 1

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" } 
    }
});

Answer 2

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

Answer 3

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