I can't figure out how to access the nested property on an array using the {{first}} and {{last}} handlebars-helpers. I have an array,
"test" : [{
"a" : 1,
"b" : 2
},
{
"a" : 2,
"b" : 3
}]
I have tried using array syntax {{{{last test}}.0.a}} but no luck.
Hope this is what you are looking for.
{{#each test}}
{{#if #last}}
{{this.a}}
{{/if}}
{{/each}}
Tested using http://tryhandlebarsjs.com
Related
I am trying to use each using handlebars for iterating over 2 objects of type array, when I iterate over them individually that works fine; but when there is a nesting of both inner object each isn't working.
a = [{a: "A"}, {a: "B"}, {a: "C"}]
b = [{b: "X"}, {b: "Y"}, {b: "Z"}]
Now these both objects can be iterated fine with
{{#each a}}
{{this.a}}
{{/each}}
{{#each b}}
{{this.b}}
{{/each}}
But it wont work for
{{#each a}}
{{this.a}} //this is getting printed
{{#each b}}
{{this.b}} //this isn't getting printed
{{/each}}
{{/each}}
(I've not mentioned any HTML syntax to reduce any confusions )
Your problem is that your data context is different when you are within the #each block. Within #each, your context is the current element in the iteration, { a: "A" }, { b: "B" }, etc. To access an object of the parent context you use Handlebars Paths:
{{#each a}}
{{this.a}}
{{#each ../b}}
{{this.b}}
{{/each}}
{{/each}}
I am trying to iterate a custom inner array object "choices". See below example, "choices" can have different number of objects inside.
{
_id: 1,
"question": "a",
"choices": [
{"a" : 1},
{"b" : "blablabla"},
{"c" : 128},
{"d" : "blebleble"}
],
"answer": "b",
"points": "10"
},
{
_id: 10,
"question": "j",
"choices": [
{"a" : 10},
{"b" : "blablabla"}
],
"answer": "b",
"points": "10"
}
I am able to display "question", "answer", "points".
This is the template I am using in main.html
<template name="question">
<button>Click Me</button>
{{#with object}}
{{question}}
{{#each choices}}
??
{{/each}}
{{answer}}
{{points}}
{{/with}}
</template>
Any help is appreciated. If you guys need more info please let me know.
You need to mend your data structure a bit as below
choices:[
{key:"a",value:1},
{key:"b",value:"bla"},
{key:"c",value:"blabla"},
{key:"d",value:"blablabla"}
]
Now in your template
{{#each choices}}
<span>Your choice is {{key}}.{{value}}</span>
{{/each}}
It should help
Thank you
In Handlebars 2+, how do I dynamically read a property in a loop like this? objects is an array of objects. keys is an array of strings. I want to loop each key for each object and put the its .foo value in the span.
{{#each objects}}
{{#each keys}}
<span>{{../this.{{this}}.foo}}</span>
{{/each}}
{{/each}}
Is this possible in plain Handlebars 2+? Or...is there a helper that does this?
I don't see the way how it can be done without helper.
With helpers everything is possible (but kind of ugly) in Handlebars.
For example, you could use something like this:
{{#each objects}}
{{#each keys}}
<span>{{lookupProp ../this this 'foo'}}</span>
{{/each}}
{{/each}}
And helper:
Handlebars.registerHelper('lookupProp', function (obj, key, prop) {
return obj[key] && obj[key][prop];
});
Look at the fiddle.
Handlebars has built-in lookup helper since version 3.0.3.
Okay... spent a few hours googling around and find a nice solution, as I had the same issue, but failed to find any...
I was as happy as Larry and jumped off my chair when I finally figured a way to get this working :D
This way, you can access object values with dynamic keys,
Demo object:
var categories = {
onion: { name: 'bar', id: 4 },
apple: { name: 'demo', id: 2 },
carrot: { name: 'foo', id: 3 },
Root: [
{ name: 'apple' },
{ name: 'onion' },
{ name: 'carrot' }
]
};
Instead of trying something like these: (which won't work)
{{#each categories.[#key]}}
or
{{#each categories.[mykey]}}
You can do:
{{#each categories.[Root] as |main-category|}}
{{#each (lookup ../categories main-category.name) as |sub-category|}}
{{sub-category.name}}
{{/each}}
{{/each}}
Hope it will help for someone else too :)
For anyone else that doesn't want to loop you could use with eg.
{{#with (lookup myObject myKeyVar) as |subObject|}}
{{subObject.key}}
{{/with}}
QQ on MongoDB and Meteor templates. I'm trying to set up a helper that will display each photo from a given DB and I'm having trouble pulling the image.
Right now a document from my DB looks like:
{ "order" : 19,
"img" : "http://foo.cdninstagram.com/photo.jpg",
"time" : "99999999999",
"user" : { "username" : "ME!",
"website" : "",
"profile_picture" : "http://foo.instagram.com/foophoto.jpg",
"full_name" : "Monique Rana",
"bio" : "",
"id" : "1234567" },
"_id" : "abc123" }
Below is the code that I'm working with.
<template name="currentTag">
<div class="container">
<ul class="grid effect-8" id="grid">
{{#each Tag}}
<li><img src="{{Tags.img}}"></li>
{{/each}}
</ul>
</div>
</template>
and the helper I'm building:
Template.currentTag.helpers({
Tag: function () {
return Tags.find().fetch();
}
});
Thanks!
You can use {{img}} instead of {{Tags.img}} to fix the issue. The data context in the {{#each Tag}} block is of the item itself.
Also you don't need .fetch since the template understands cursors, which are slightly more efficient i.e return Tags.find();
Is it possible to do this?
{{#each not categorized}}
<p>blablab</p>
{{/each}}
or do I have to do something like
{{#each not_categorized}}
<p>blablab</p>
{{/each}}
Because when I use the first option, nothing gets displayed!?
My JSON returns:
{
"not categorized": [
{ .... }
],
"live": [
{....}
],
"others": [
{....}
]
}
It works when I do:
{{#each live}}
....
{{/each}
What is the issue here?
thanks in advance...
Access using brackets []
{{#each [not categorized]}}
<p>blablab</p>
{{/each}}
You can use it in combinations with dot notation if you need to access sub objects.