Looping Objects of Object with handlebars.js - javascript

I have a simple node.js app that returns the following json.
{
computers: {
john: {
cpu: "intel",
ram: "8MB",
hd: "1TB"
},
jane: {
cpu: "intel",
ram: "12MB",
hd: "500GB"
},
mary: {
cpu: "intel",
ram: "8MB",
hd: "500GB"
}
}
}
in my index.hbs file I have the following.
{{#each computers}}
{{#each this}}
{{cpu}} {{ram}} {{hd}}
{{/each}}
{{/each}}
I would like the get the following result.
John: intel, 8MB, 1TB
jane: intel, 12MB, 500GB
etc..
Any suggestion is greatly appreciated!

You don't have to create nested each. Simply using paths combined with #key to get current key of iterating object will do.
{{#each computers}}
{{#key}}: {{./cpu}}, {{./ram}}, {{./hd}}
{{/each}}

Related

Retrieve one specific key from JSON array with helpers

I have the following array with an object:
"customfield_10297": [
{
"self": "https://xxxxx.atlassian.net/rest/api/2/customFieldOption/10326",
"value": "Manual",
"id": "10326"
}
],
And I want to retrieve only the value key from it. Is there any way to do it with handlebars? I know only that I can iterate, but the whole array appears in report this way:
<br><b>Test Type:</b> {{#each data.jira.customfield_10297}}
{{#each this}}
<{{#key}}>{{this}}</{{#key}}>
{{/each}}
{{/each}}

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.

Passing an array of objects to a partial - handlebars.js

Im trying to pass an array of objects into a partial as an argument:
{{> partial [{title: "hello", year: "2015"}, {title: "hello2" year: "2015"}] }}
and then on the partial:
<div>
{{#each this}}
<label>{{title}}</label>
<label>{{year}}</label>
{{/each}}
</div>
... but nothing shows up.
Is there a way to pass array data to a partial?
Thanks in advance.
Create a helper that parses the JSON and wrap your partial with this context.
Template:
{{#getJsonContext '[{"title": "hello", "year": "2015"}, {"title": "hello2" "year": "2015"}]'}}
{{> partial this }}
{{/getJsonContext}}
Note that the names are quoted as well as the values in the JSON string.
Helper:
Handlebars.registerHelper('getJsonContext', function(data, options) {
return options.fn(JSON.parse(data));
});
Credit: https://github.com/assemble/assemble/issues/228#issuecomment-20853985
This should work
{{> partial items=this.something }}
in
Handlebars.registerPartial(
'partial',
"<div>{{#each items}}<label>{{title}}</label><label>{{year}}</label>{{/each}}</div>"
);
input:
{
something: [{title: "hello", year: "2015"}, {title: "hello2", year: "2015"}]
}
Also, there is a problem in the JSON object.

Handlebars js if condition

My json part:
var context = {
author: [{
id: 47,
name: "Yehuda Katz"
},
{
id: 48,
name: "Kate"
},
{
id: 49,
name: "Jim"
}
]}
Handlebars
{{if author}}
<li>{{id}}</li>
<li>{{name}}</li>
{{/if}}
I want to display the contents once author key is present. If not,it won't display.
However,my above code doen't displays the author eventhough it is present.
Whats wrong in my code??
Handlebars block helpers (like if) need a hash character before the block statment
so instead of
{{if author}}
<li>{{id}}</li>
<li>{{name}}</li>
{{/if}}
do
{{#if author}}
<li>{{id}}</li>
<li>{{name}}</li>
{{/if}}

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

Categories

Resources