CODEWITHSUNDEEP
javascriptmeteorhandlebars.js
Harry
Harry

Reputation: 54939

Meteor and handlebars #each to iterate over object

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>

Upvotes: 21

Views: 20129

Answers (3)

Tarang
Tarang

Reputation: 75945

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

Upvotes: 37

Robert Fines
Robert Fines

Reputation: 720

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

Upvotes: 4

solo999
solo999

Reputation: 171

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

Upvotes: 8

Related Questions