I have two arrays like below.
const arr1 = [ 1, 2 ]
const arr2 = [[1,3,5],[2,4,6]]
I want loop through arr1 and inside loop I want to loop through arr2[arr1.index].
My attempt is below, but of course it is not working:
{{#each arr1}}
{{#each arr2.[ #index ]}} //index is from #each arr1
{{/each}}
{{/each}}
Any ideas?
You can achieve that result by doing:
{{#each arr2}}
{{#each this}}
{{ this }}
{{/each}}
{{/each}}
Well answer is lookup helper and ../ for reaching parent scope.
{{#each arr1}}
{{#each (lookup ../arr2 #index)}} //index is from #each arr1
{{/each}}
{{/each}}
Related
Below is the code i want check:
{{#each user.Addtasks}}
{{#if {{this._id}} == {{ID}} }}
Statement;
Statement;
{{/if}}
{{/each}}
Here _id and ID both are getting passed from route to the handlebar page and now I want to compare them.
Thanks!
I'm relatively new to Handlebars so this might some something simple that I'm missing, but I can't seem to output specific elements of every object in an array. I've searched through multiple posts and read the handlebars documentation, but so far haven't found a solution. Basically I'm trying to output the availability for a series of time slots and their statuses that are assigned to one item. Here's my code...
Data
Pitch: {
"name": "test",
"price": 11,
"city": "testCity",
"availability": [
{
"status": "reserved",
"dt": "2018-11-16T20:00:00Z"
},
{
"status": "available",
"dt": "2018-11-16T19:00:00Z"
}
]
}
index.js
router.get('/availability/:id', function(req, res, next) {
Pitch.findById(req.params.id, function (err, docs){
var indPitch = [];
indPitch.push(docs);
res.render('pitch/availability', { title: 'Availability', indPitch: indPitch });
});
availability.hbs
{{#each indPitch}}
<h3>{{ name }}</h3>
<p class = "description">{{ city }}</p>
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
<p class = "description">Price per hour : €{{ price }}</p>
Select
{{/each}}
With the handlebars code above, only the city and price are output to the screen. If I change {{#each availability}} to {{#each this}} and then access the object as {{availability.[0].status}} or {{availability.[1].dt}}, etc. I can then output that item to the screen.
But, what I need to do is loop through 'Availability' for the item and display all date/times and their status. Any ideas what I'm doing wrong? If you need more information, let me know.
just use this before each element this should work
{{#each indPitch}}
<h3>{{this.name }}</h3>
<p class = "description">{{ this.city }}</p>
{{#each availability}}
{{this.status}}
{{this.dt}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
Select
{{/each}}
Ok, so after a few hours of trying every combination of #each this and #each availability, eventually one worked. Posting the answer here incase anyone else has the same problem...
I had to nest {{#each availabilty}} inside an {{#each this}} as follows...
{{#each indPitch}}
<h3>{{this.name }}</h3>
<p class = "description">{{ this.city }}</p>
{{#each this}}
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
Select
{{/each}}
I need access to next item in array while using foreach loop in handlebars.js.I've tried:
{{#each items}}
{{#ifEven #index}}
<p>{{this.description}} - {{../items.[#index+1].description}}</p>
{{/ifEven}}
{{/each}}
but it seems that's not working correctly.
I already solved it using helper:
hbs.registerHelper('nextItem', function (array, index, options) {
return options.fn(array[index + 1]);
});
And .hbs template now looks like this:
{{#each items}}
{{#ifEven #index}}
<p>{{this.description}} - {{#nextItem ../items index}} {{description}} {{/nextItem}}</p>
{{/ifEven}}
{{/each}}
I know, that last element will not show, but this doesn't matter in my case.
I want to compare iteration values using handlebars. This is my code
{{#each accounts}}
{{#each projects}}
{{#if}} (compare accounts.project_id with projects._id)
// display the project name
{{else}}
// display not found
{{/if}}
{{/each}}
{{/each}}
Please help. I'm new to handlebars/
Use the {{compare}} helper from the handlebars-helpers module.
{{#each accounts}}
{{#each projects}}
{{#compare accounts.project_id "==" projects._id)
// display the project name
{{else}}
// display not found
{{/compare}}
{{/each}}
{{/each}}
Refer to the documentation on how to install and use the helpers.
You can do so with a simple helpers in Handlebars like so:
Handlebars.registerHelper('if_eq', function(a, b, opts) {
if(a == b)
return opts.fn(this);
else
return opts.inverse(this);
});
and in your code...
{{#each accounts}}
{{#each projects}}
{{#if_eq accounts.project_id projects._id}}
// display the project name
{{else}}
// display not found
{{/if_eq}}
{{/each}}
{{/each}}
I am trying to set default value in an html select, but without sucess.
I'm doing the initial populating like this:
<template name="demo">
<select>
{{#each foo}}
<option>{{this}}</option>
{{/each}}
</select>
</template>
And i set the possible options in the model like this:
Template.demo.foo = ["aaa","bbb","ccc"];
So far, everything work as intended.
Now i'm trying to display row of the collection collec, populating the select with the defaut recorded foo value (aaa or bbb or ccc).
My understanding is that you must add "selected" to the tag.
So i do something like this with multiple nested blocks:
<template name="demo">
{{#each collecs}}
{{_id}}
<select>
{{#each foos}}
<option{{#if isSelected this ../this}}selected{{/if}}>{{this}}</option>
{{/each}}
</select>
{{/each}}
</template>
And on the model front:
Template.demo.foos = ["aaa","bbb","ccc"];
Template.demo.collecs = function(){
return Collec.find({});
};
Template.demo.isSelected = function(fooToCheck, record){
var rid= record._id;
var currentRecord = Collec.findOne({_id:rid});
return (fooToCheck==currentRecord.foo);
};
The problem is that it does not work.
The dropdown stays empty, and the generated html code show something like this:
" >aaa "
I have checked in the js part, all seems to work correctly, true/false are adequately returned.
Thank in advance for your help.
Handlebars conditionals don't do well inline. In fact, I'm not sure if they work inline anywhere. What was happening was that the Handlebars templating engine didn't understand your html, so it skipped over it, which is why you saw '>aaa'.
The following code works. I took the liberty of simplifying your isSelected function.
Template:
<template name="demo">
{{#each collecs}}
{{_id}}
<select>
{{#each foos}}
{{#if isSelected this ../foo}}
<option selected>{{this}}</option>
{{else}}
<option>{{this}}</option>
{{/if}}
{{/each}}
</select>
{{/each}}
</template>
JavaScript:
Template.demo.foos = ["aaa","bbb","ccc"];
Template.demo.collecs = function(){
return Collec.find({});
};
Template.demo.isSelected = function(fooToCheck, recordFoo){
return (fooToCheck === recordFoo);
};