CODEWITHSUNDEEP
javascripthandlebars.jsexpress-handlebars
Alvaro
Alvaro

Reputation: 41605

Iterate through object by dynamic property in handlebars.js

I was trying to iterate through an object by using a dynamic property name it doesn't seem to be working:

{{#each orders["order" + name] }}

Not even this seems to be working

{{#each orders["orderDemo"] }}

But this does:

{{#each orders.orderDemo }}

Any solution to deal with dynamic property names depending on other conditions or iterations?

In my case I have:

{{#each types}}
    {{#each orders[type] }}
        <table>....</table>
    {{/each}}
{{/each}}

Upvotes: 2

Views: 289

Answers (1)

zeppelin
zeppelin

Reputation: 9365

AFAIK Handlebars does not provide any build-in support for the dynamic properties, but you can register a simple "Helper Function" like this:

Handlebars.registerHelper('orders', function(parent,child,options) {
  return parent["order"+child].map(options.fn).join``
});

and then use it as follows:

<ul>
  {{#orders orders name}}
      <li>{{this}}</li>
  {{/orders}}
</ul>

If you are feeling recursive, you can even do:

Handlebars.registerHelper('forEach', function(parent,expr,options) {
  return parent[Handlebars.compile(expr)(this)].map(options.fn).join``;
});

{{#forEach orders "order{{name}}" }}
    <li>{{this}}</li>
{{/forEach}}

but if you have a lot of data, this would be a performance hog.

Upvotes: 1

Related Questions