I show users as list of input type=button using {{#each}} then when click function will running to get value of that input but i got undefined .
Here's the code:
app.js
app.get('/search',(req,res)=>{
data.find({}).then(data=>{
res.render('./search', {data: data});
});
search.handlebars
<table class="blueTable" >
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<td>
<input class="button" type="button" onclick="recive()" id="reciver" name="reciver" value="{{Name}}">
</td>
</tr>
{{/each}}
</tbody>
</table>
<script>
function recive(){
var reciver = document.getElementById("reciver").value
console.log(reciver)
}
</script>
<table class="blueTable" >
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<td>
<input class="button" type="button" onclick="receive(this)" name="reciver" value="{{Name}}">
</td>
</tr>
{{/each}}
</tbody>
</table>
<script>
function receive(element){
var receiver = element.value
console.log(receiver)
}
</script>
Why undefined in Javascript?
undefined is a property of the global object; i.e., it is a variable
in global scope. The initial value of undefined is the primitive value
undefined . ... A method or statement also returns undefined if the
variable that is being evaluated does not have an assigned value.
Basically it can't reference the {{Name}} part I assuming. Change {{Name}} to {{this}}
If you have a object with for example the name People
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
Notice {{#each people}}, then change {{Name}} to {{this}}
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
Outputs:
<ul class="people_list">
<li>Yehuda Katz</li>
<li>Alan Johnson</li>
<li>Charles Jolley</li>
</ul>
When looping through items in each, you can optionally reference the current loop index via {{#index}}
{{#each array}}
{{#index}}: {{this}}
{{/each}}
Additionally for object iteration, {{#key}} references the current key name:
{{#each object}}
{{#key}}: {{this}}
{{/each}}
Related
I am trying to figure out how to render some data in a table using Handlebars.
I already have the part for the header.
I did it like this:
<thead>
<tr>
{{#each chart.table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{{th-title}}}</strong>
<p>{{{th-description}}}</p>
</th>
{{/each }}
</tr>
</thead>
And here my chart.json:
{
"table-header" : [
{
"th-title": "",
"th-description": "",
"th-image": "",
"special-case": ""
},
{
"th-title": "Online Investing",
"th-description": "Make more informed...",
"th-image": "MESDicon.png",
"special-case": ""
},
{
"th-title": "Merrill Edge Guided Investing",
"th-description": "Go online to...",
"th-image": "MEGIicon.png",
"special-case": ""
},
{
"th-title": "Invest with an advisor",
"th-description": "Get professional...",
"th-image": "MEACicon.png",
"special-case": ""
}
],
"table-body" : [
{
// HERE GOES THE INFO FOR THE TBODY ELEMENT.
}
]
}
But for the rest of tbody part I don't know how can I render the rest of the info.
It should look like this:
But the idea is to render that data coming from the chart.json file.
<tbody>
<tr>
<td>Investing method</td>
<td>Online</td>
<td>Online with professional portfolio management</td>
<td>With an advisor</td>
</tr>
<tr>
<td>Simple, straight-forward pricing</td>
<td><strong>$6.95 online equity & ETF trades<sup>3</sup></strong><br>(Qualify for $0 trades with Preferred Rewards)<sup>2</sup> Other fees may apply<sup>3</sup> </td>
<td><strong>0.45% annual fee</strong><br>Other fees may apply</td>
<td><strong>0.85% annual program fee</strong><br>Other fees may apply</td>
</tr>
<tr>
<td>Minimum investment</td>
<td><strong>None</strong></td>
<td><strong>$5,000</strong></td>
<td><strong>$20,000</strong></td>
</tr>
<tr>
<td>Investment choices</td>
<td><strong>Full range of investments</strong></td>
<td><strong>A set of ETF strategies</strong></td>
<td><strong>A set of mutual fund/ETF strategies</strong></td>
</tr>
<tr>
<td>Bank & invest with one login</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
</tbody>
Any suggestions?
since your table-body is array of objects. you can loop through that and using keys you can access data.
<thead>
<tr>
{{#each chart.table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{{th-title}}}</strong>
<p>{{{th-description}}}</p>
</th>
{{/each }}
</tr>
</thead>
<tbody>
{{#each chart.table-body}}
<tr>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
</<tr>
{{/each}}
</tbody>
Use below code snippet to resolve the issue:
<thead>
<tr>
{{#each table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{th-title}}</strong>
<p>{{th-description}}</p>
</th>
{{/each }}
</tr>
</thead>
<tbody>
{{#each table-body}}
<tr>
<td>{{key1}}</td>
<td>{{key2}}</td>
<td>{{key3}}</td>
<td>{{key4}}</td>
</<tr>
{{/each}}
</tbody>
The problem is that you are not enclosing your handlebars in a <script> tag. Handlebars will compile the template incorrectly without throwing any errors. For div it works always it seems.
Thus simply wrap the template section in a script tag like so:
<script type="text/x-handlebars-template" id="carBladeTemplate">
{{#each cars}}
<tr class="carItem" data-car-id="{{Id}}">
<td>{{Id}}</td>
<td>{{Make}}</td>
<td>{{Model}}</td>
</tr>
{{/each}}
</script>
I would like to build a dynamic table using handlebars. I think I have to use lookup helper to achieve my wanted result. I am having some trouble using the lookup helper and the documentation is rather poor.
An example of my object looks like this:
{
headers:[
0:"name",
1:"brand",
2:"type",
3:"rating",
4:"edited"
]
tableContent:[
0:{
contentName:{
name:"Fanta",
brand:"Coca-Cola Company",
type:"Soda",
rating:"3",
edited:"2017-05-24"}
}
]
}
Handlebars template:
<script id="itemTemplate" type="text/x-handlebars-template">
<table id="table" class="bordered highlight centered">
<thead>
<tr>
{{#headers}}
<th>{{this}}</th>
{{/headers}}
</tr>
</thead>
<tbody>
<tr>
{{#each tableContent}}
{{#each headers}}
<td>{{lookup ../contentName headers}}</td>
{{/each}}
{{/each}}
</tr>
</tbody>
</table>
</script>
The reason I can't simply do <td> contentName.name </td> and so on, is that the user can create their own columns in the database, so I would have no way of knowing the property names beforehand.
With a little modification in your object, you can do it with ember-contextual-table.
Here is the twiddle for you.
Sample code:
{{#data-table data=data.tableContent as |t|}}
{{#each data.headers as |columnName|}}
{{t.column propertyName=columnName name=columnName}}
{{/each}}
{{/data-table}}
Updated
But if you want to make your code run, here it is:
<table class="bordered highlight centered">
<thead>
<tr>
{{#each data.headers as |header|}}
<th>{{header}}</th>
{{/each}}
</tr>
</thead>
<tbody>
<tr>
{{#each data.tableContent as |c|}}
{{#each data.headers as |h|}}
<td>{{get c h}}</td>
{{/each}}
{{/each}}
</tr>
</tbody>
</table>
Have a look at this twiddle
I am using handlebars as my view templates with the mix of Angularjs. I am stuck in a situation where I have a loop in which I am displaying all the elements as clickable url which when clicked should pass the value to controller.
Code I have written:
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
Angular.js controller code:
$scope.productDiscovery = function(productName){
alert("Task Id is "+productName);
var productName = $scope.productName;
console.log($scope.productName)
console.log(productName)
};
But I keep getting the productName as undefined.
Try something like:
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
var productName = $scope.result;
$scope.productDiscovery = function(){
alert("Task Id is "+productName);
};
Handlebars have the same syntax of printing the data and takes the precedence over Angular when using both.
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
I want to pass a param like this from template to controller or route.
<script type="text/x-handlebars" data-template-name="plan">
<table class="table table-bordered">
<thead>
<tr>
<th>Truck Number</th>
<th>Driver Name</th>
<th>Trip 1</th>
<th>Trip 2</th>
</tr>
</thead>
<tbody>
{{#each truck in model}}
<tr>
<td>{{truck.truckNumber}}</td>
<td>{{truck.driverName}}</td>
<td>{{render "plan.trip" truck.shipments trip=1}}</td>
<td>{{render "plan.trip" truck.shipments trip=2}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
<script type="text/x-handlebars" data-template-name="plan/trip">
<ul>
{{#each shipment in tripShipment}}
<li>{{shipment.routeCode}}</li>
{{/each}}
</ul>
</script>
Trp.PlanTripController = Ember.ArrayController.extend({
trip: '',
tripShipment: function() {
return this.filterBy('trip', this.get('trip'));
}.property('#each.trip')
});
But this this.get('trip') do not work. How can I render this template with trip as parameter?
Use query-params with a link-to helper in your template, sort of like this. In this case trip is a bound variable, but you could also put it in quotes to pass a specific value.
{{#each truck in model}}
<tr>
<td>{{truck.truckNumber}}</td>
<td>{{truck.driverName}}</td>
<td>{{#link-to "trucks" query-params=trip}}trip 1{{/link-to}}</td>
<td>{{#link-to "trucks" query-params=trip}}trip 2{/link-to}}</td>
</tr>
{{/each}}
I want to count the position of table children using jQuery in a Meteor JS helper function, but I always get an empty result, because the helper function returns before the table data gets inserted.
Here is my code:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Game</th>
</tr>
</thead>
<tbody>
{{#each games}}
{{> game}}
{{/each}}
</tbody>
</table>
<template name="game">
<tr>
<td>{{counter}}</td>
<td>{{name}}</td>
</tr>
</template>
Template.game.helpers({
counter: function() {
return $('table.table tbody tr td:contains("this.name")').index();
}
});
It should be like:
1 Test
2 ABC
3 HelloWorld
...
Any help would be greatly appreciated.
The idea for solution is that you add to array of games objects additional field called index.
Later in game template you simply use {{index}}.
Below code should solve your issue:
var games_with_index = Games.find().map(function(document, index){
document.index = index;
return document;
});
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Game</th>
</tr>
</thead>
<tbody>
{{#each games_with_index}}
{{> game}}
{{/each}}
</tbody>
</table>
<template name="game">
<tr>
<td>{{index}}</td>
<td>{{name}}</td>
</tr>
</template>
See also this:
Print the loop index in Meteor.js templates