We Keep Coding

get specific user from list of #each input

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}}

How can I render data in a table using Handlebars?

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>

Handlebars lookup helper to build dynamic tables

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

Clear old Meteor subscription data

I have a Meteor template that uses a dynamic subscription:
var templateId = event.target.value;
Meteor.subscribe('orderTemplateShow', templateId)
templateId changes depending on the select value I choose:
<p><label>Select Template</label></p>
<select id="templateSelect" name="templateSelect">
<option disabled selected> Select Template </option>
{{#each orderTemplates}}
<option value="{{this._id}}">{{this.templateName}}</option>
{{/each}}
</select>
Once I select a template, the template's information renders on a table that I have on the template.
My table:
<table id="templateItems" class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Description</th>
<th>Member Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each templateItems}}
<tr>
<td>{{productCode}}</td>
<td>{{brand}}</td>
<td>{{description}}</td>
<td>${{memPrice}}</td>
<td><input type="text" id="qty" value ="{{quantity}}"></td>
<td><button class="btn btn-primary removeCartItem">Remove</button></td>
</tr>
{{/each}}
</tbody>
</table>
</form>
However, when I click on a new template, data from the old template still appears on the table, in addition to data from the new template that I select. Therefore, is there a way for me to dynamically remove data from an old subscription?
Thanks!

When you subscribe to the publication, keep a subscription handle. Then when you want to cancel that subscription, invoke .stop() to cancel it.
var subHandle = Meteor.subscribe('orderTemplateShow', templateId);
...
subHandle.stop()

Decelerate Meteor page rendering for helper function

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