CODEWITHSUNDEEP
node.jsexpresshandlebars.jsmustache
volume one
volume one

Reputation: 7573

How to use data from another object within an #each block in Handlebars/Mustache

If I have a set of data called products and if want to render them on a view page I can do something like this:

<ul class="product_list">
  {{#each products}}
    <li>{{products.ProductTitle}}</li>
  {{/each}}
</ul>

But in that loop above, I want to include some other data like this:

<ul class="product_list">
  {{#each products}}
    <li>{{products.ProductTitle}}</li>
    <img src="{{appvar.CDN}}/img.jpg"/> // appvar is a different data object
  {{/each}}
</ul>

At the moment, if I do as above, I get nothing back from {{appvar.CDN}}. No error, just nothing... so it ends up rendering like <img src="/img.jpg"/>

I can't see this particular scenario addressed in the handlebars.js documentation (I think a lot of stuff is undocumented! may have to look into vue.js for the server side).

Upvotes: 0

Views: 432

Answers (1)

AdamP.
AdamP.

Reputation: 137

Take a look at the handlebars documenation for paths https://handlebarsjs.com/#paths. To access the appvar you might need to include ../ before your property name, so that handlebars will evaluate it against a parent context.

Upvotes: 1

Related Questions