Develop Reference

(Handlebar.JS)Best way to output different templates for items with certain keys

I am stuck already with this problem for more than a day, the idea is that would like somehow to also add a comma between each of the items and a full stop at the end.
{{#each items}}
<button class="accordion-button"
{{#if (equals type "article")}} {{AUTHOR}} {{TITLE}} {{JOURNAL}} {{VOLUME}}({{NUMBER}}) {{/if}}
{{#if (equals type "book")}} {{AUTHOR}} {{EDITOR}} {{BOOKTITLE}} {{/if}}
</button>
{{/each}}
I was suggested to add a custom helper for each handlebar and it worked partially as I am not able to find the last element and add a full stop to it. Is there any way to get all the existing handlebars between the {if}........{/if} statement and loop through them?
One .json entry:
{
"key": "ACM94b",
"type": "article",
"AUTHOR": "Adam",
"INSTITUTION": "ACM",
"JOURNAL": "Communications of the ACM",
"KEYWORDS": "scglib",
"MONTH": "May",
"NUMBER": "5",
"TITLE": "Reverse Engineering",
"VOLUME": "37",
"YEAR": "1994"
},
Thank you for your time.

How do I access and iterate array items by index in handlebars?

I need to iterate the JSON data in the handlebars in {{#each}} statement.
This is the JSON data,
{
"no": 0,
"address": "Here",
"name": "There",
"members": [
{
"email": "test#test.com",
"name": "SH",
"sex": "F"
},
{
"email": "test2#test.com",
"name": "SH2",
"sex": "F"
}],
"diary": [
{
"ddate":"0820",
"dcheck":"y"
},
{
"ddate":"0821",
"dcheck":"n"
}]
}
and this is the Handlebars code.
I need to iterate 1st, 2nd, 3rd... object's properties in the members list.
I want to know what to put in instead of [0].
{{#each list}}
<tr>
<td><a href='bd-view.html?email={{members.[0].email}}'>{{members.[0].email}}</a></td>
<td>{{members.[0].name}}</td>
<td>{{members.[0].sex}}</td>
<td>{{name}}</td>
<td>{{diary.[0].dcheck}}</td>
<td><input type="checkbox"></td>
</tr>
{{/each}}
This is my first question in stackoverflow.
Hope to see someone answer this question.
Thanks a lot, cheers.

You can use the following:
{{#each members}}
<tr>
<td><a href='bd-view.html?email={{email}}'>{{email}}</a></td>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{name}}</td>
{{#with (lookup ../diary #index)}}
<td>{{dcheck}}</td>
{{/with}}
<td><input type="checkbox"></td>
</tr>
{{/each}}
Using the #each to iterate your array, and the function #lookup to access to relative position of the array diary

I actually upvoted Matheus answer using the with lookup of the index. however I did it a different way where I manipulate the data before passing it in.
for (var i = 0; i < data.members.length; i++) {
data.members[i].dcheck = data.diary[i].dcheck;
}
here is a fiddle
http://jsfiddle.net/N2b5M/6750/

How can I make a ractive template with this Javascript object?

I want to access all the property of this object.
var country = {
country: "US",
states : [{
state: "california",
capital: "sacramento"
},
{
state: "texas"
capital: "austin"
}]
};
I tried the ff but only renders country value.
{{#each country}}
{{country}}
{{#each states}}
{{states.state}} {{states.capital}}
{{/each}}
{{/each}}

This is the part that's incorrect:
{{#each states}}
{{states.state}} {{states.capital}}
{{/each}}
Since states is an array, states.state doesn't mean anything – just use the property directly:
{{#each states}}
{{state}} {{capital}}
{{/each}}
As an aside, it's often a good idea to structure your data more like this:
var country = {
name: "US",
states : [{
name: "california",
capital: "sacramento"
},
{
name: "texas"
capital: "austin"
}]
};
In other words, the items in states are objects with name properties – the object is the state, it doesn't have a state property. I've often done that sort of thing in the past and come to regret it, because then you find confusing references to state.state in your code!

You are trying to iterate over country as if it were an array, but in your example that is only a plain object. In that case, this http://jsfiddle.net/ns8f8mwa/ will print that object.
If you ment to first loop out every country, then the states, this http://jsfiddle.net/jgmbu7wr/ is an example of that.

Unable to loop through json response in ember template

My json array is
{
"object": {
"assignments": [
{
"assignmentId": 14706368,
"sectionId": 0,
"assignmentTitle": "file attachment A",
"assignmentStartDate": "01/01/1900",
"assignmentStartTime": "01:00AM",
"assignmentDueDate": "01/01/2100",
"assignmentDueTime": "01:00AM",
"isMarathonChain": "No",
"assignmentTimeLimit": 0,
"assignmentTimeRemaining": "0",
"marathonAssignmentStatus": "MARATHON_NOT_ASSOCIATED",
"showAssignmentAttemptsAndPasswordDetails": false,
"assignmentAttemptsTaken": 0,
"assignmentAttemptsAllowed": "1",
"showPasswordForm": false,
"isStartAssignment": true,
"isResumeAssignment": false,
"isSubmitAssignment": false,
"passwordRequired": false,
"isConvertToGeniusEnabled": false,
"draftNumber": 0,
"studentExceptionExistsForDueDate": false,
"isPastUploadDate": false,
"showMarathonPrerequisiteInfo": false
}
],
"sections": [
{
"sectionId": 241409387,
"courseId": 241409386,
"sectionName": "Section01"
}
],
"courses": [
{
"courseId": 241409386,
"courseName": "Tricon.Connect_01",
"showDiscipline": false
}
],
"users": [
{
"userId": 1000321061,
"firstName": "Ragu �������&^&",
"lastName": "+##)()Tricon �^^������",
"userType": "S"
}
],
"returnLMS": [
{
"returnUrl": "bb"
}
]
}
}
and i want to loop through suppose assignmet values
i am writing this in my template for looping model
{{#each obj in model.object}}
<tr>
{{#each assign in obj.assignments }}
<td>
{{assign.assignmentId} <br />{{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
But i am not getting the output. My loop is getting failed at 1st line only.
i have to use these values to match some condition and display info.

This is now handled by using the {{each-in}} helper in the template. You can read more about it here but I will attempt an example that will work in your case
{{#each-in model.object as |key values|}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
Although your example looks more like you want to only loop through assignments because you are using assignment specific code inside the inner each so that would just look like this
{{#each model.object.assignments as |values|}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
If you did, however, want to loop through each of the keys and have different templates based on which key you are currently dealing with you could do something like this:
{{#each-in model.object as |key values|}}
{{#if (eq key 'assignments')}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/if}}
{{#if (eq key 'sections')}}
<tr>
{{#each values as |section|}}
<td>
{{section.sectionId} <br /> {{section.sectionName}
</td>
{{/each}}
</tr>
{{/if}}
{{/each}}
But of course that would be up to you and what you're trying to achieve with your application 😂 Also, by the way, this example makes use of ember-truth-helpers which is quite useful if you want to do things like those {{#if}} blocks in my example.

Based on the example JSON you've given, the following line is your problem:
{{#each obj in model.object}}
It seems that model.object is a Javascript object, not an array. The each loop only iterates or arrays (and possibly array-like objects), not arbitrary Javascript objects. If you want to iterate over the keys and values of an object, you'll have to create a computed property to do it.

Variables outside of #each with handlbars

I have the data,
data = {
"items": [
{"value": "New", "id": 1},
{"value": "Open", "id": 2},
{"value": "Close", "id": 3}
],
"current": 2
}
I'm my template I loop through items, but want to access the current value while in the loop.
This doesn't work,
{{#each items}}
{{id}} - {{value}} - {{current}}
{{/each}}

From the fine manual:
Nested handlebars paths can also include ../ segments, which evaluate their paths against a parent context.
So you want to use {{../current}} to access the value of current in the parent context.
Demo: http://jsbin.com/iyofuq/1/edit