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