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
Related
Using handlebars, I want to get the first item in an array that matches a conditional statement.
Here is an example object:
var objects = {[
"A": {
"isRed": false,
"name": "Yellow Circle"
},
"B": {
"isRed": true,
"name": "Red Square"
},
"C": {
"isRed": true,
"name": "Red Triangle"
}]};
I want to do something sort of like this
{{#each objects}}
{{#if this.isRed}}
{{#if #first}} {{!-- Want the first item that matches the above conditional --}}
{{this.name}}
{{/if}
{{/if}}
{{/each}}
Expected output:
Red Square
I believe that {{if #first}} won't work because it is looking at the second element in the array so it fails the condition.
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
When using {{#each}} in a template, I have to use {{this.name}} - {{this.thing}} instead of just {{name}} - {{thing}} for some reason.
{{thing}} prints out the proper value, but {{name}} is just a copy of {{thing}} instead of actually printing the correct value.
If I use {{this.name}}, the correct value is returned.
template.html
<template name="templ">
{{#each items}}
{{name}} - {{thing}}<br/> // name == thing unless i use this.name/this.thing
{{/each}}
</template>
template.js
Template.templ.helpers({
'items':function(){
return Items.find(); //also tried find().fetch()
}
});
EDIT console output of Items.find().fetch()
[Object, Object, Object, Object, Object]
0:{
Object_id: "er2KGErydGoZBwrMc",
name: "A",
thing: "b.txt"
},
1:{
Object_id: "vmkgkejA3TvLZu6c6",
name: "B",
thing: "b.txt"
},
2:{
Object_id: "jzA2szPiakXiLibCq",
name: "C",
thing: "c.txt"
},
3: {
Object_id: "RA29CJkgZHmhreWZo",
name: "E",
thing: "e.txt"
}
Using just {{name}} - {{thing}} in {{#each}} block renders value of thing for each item. {{this.name}} renders correct value for name.
Turns out I had a helper already named {{name}}. So {{#each}} {{name}}-{{thing}} {{/each}} was using the name helper instead of the data context.
oops
I want to fetch the last item of my JSON file. So I took a look at Getting the last element from a JSON array in a Handlebars template and tried to implement it. So far it gives me the number of the last entry but I need the options as well but dont know how to do it?
This is from the example mentioned
Handlebars.registerHelper("last", function(array, options) {
return array[array.length-1];
});
I tried to do:
Handlebars.registerHelper("last", function(array, options) {
if (array[array.length-1]) return options.fn(this);
return options.inverse(this);
});
My JSON files structure is:
releases: [{
"title" : "some title",
"releaseDate" : "2014-08-04"
},
"services": [{
"name" : "spotify",
"link" : "some link"
},
{
"name" : "itunes",
"link" : "some link"
}]
]
so my Handlebars template looks like:
{{#each releases}}
{{#last releaseDate}}
{{#each services}}
{{#equal name "Spotify" }}
{{/equal}}
{{#equal name "Itunes" }}
{{/equal}}
{{/each}}
{{/last}}
{{/each}}
But its not working, it displays an empty DIV
please help?
Handlebars already has #first and #last pseudo-variables. See docs on iterations and built-in helpers.
Example use case:
textArray = ["First", "N-1", "Last"]
<span>{{#each textArray}}{{#if #last}}{{this}}{{/if}}{{/each}}</span>
Result: <span>Last</span>
I would use an iterator helper for this.
Handlebars.registerHelper('layoutReleases', function (rows, options) {
var buffer = [], lastRow;
if (rows && rows.length > 0) {
lastRow = rows[rows.length-1];
buffer.push(options.fn(lastRow));
}
return buffer.join('');
});
Template:
{{#layoutReleases releases}}
{{releaseDate}}
{{#each services}}
{{#equal name "Spotify" }}
{{/equal}}
{{#equal name "Itunes" }}
{{/equal}}
{{/each}}
{{/each}}
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.