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.
Related
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}}
So I am using a JSON object that looks something like this:
data: [
{
title: "Post Title One",
categories: {
data: [
{
id: 1,
name: "Category Name 1"
}
]
}
},
{
title: "Post Title Two",
categories: {
data: [
{
id: 2,
name: "Category Name 1"
},
{
id: 3,
name: "Category Name 2"
}
]
}
}
]
and I want to grab all the categories for each post and display them using Vue. So what I have currently is:
<div v-for="post in posts">
<div>{{ post.categories.data }}</div>
</div>
In that {{ post.categories.data }} I am trying to display the category name from the JSON object. When I use what I have above the whole array is displayed in the div. When I try to do something like
{{ post.categories.data.name }}
or
{{ post.categories.data[0].name }}
I don't display the name of the category. I would really like to display the name of every category a post has, but can't seem to get it to display correctly.
EDIT: Also posts is the data property I am using in VueJS and am setting the JSON object to become that property.
You should use map method in conbination with destructuring.
<div v-for="post in posts">
<div>{{ post.categories.data.map(({name}) => name).join(' ') }}</div>
</div>
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.
I am tying to display a JS object of data using underscore templates. I can't seem to be able to work out how to drill through the object to get the country names or other date (for example tarrifType) and display it using my template. The object looks like this...
var items = [
{
"country": {
"China": [
{
"tarrifType": "China Pass",
"fixLine": "23p",
},
{
"tarrifType": "Monthly plan",
"fixLine": "3p",
}
],
"Australia": [
{
"tarrifType": "Pay as you go",
"fixLine": "73p"
},
{
"tarrifType": "Australia Pass",
"fixLine": "49p",
},
{
"tarrifType": "Monthly plan",
"fixLine": "20p",
}
],
"Nigeria": [
{
"tarrifType": "Pay as you go",
"fixLine": "73p"
},
{
"tarrifType": "Nigeria Pass",
"fixLine": "49p"
}
]
}
}
];
I am reading the object and binding it to a template like this it using this
var tableTemplate = $("#table-data").html();
$("table.outer tbody").html(_.template( tableTemplate, {items:items} ));
And I am using this underscore template...
<script type="text/html" id='table-data'>
<% _.each(items,function(item,key,list){ %>
<tr>
<td></td>
<td><%- item.country %></td>
</tr>
<% }) %>
</script>
So far I am not getting any errors but template renders but only displays [object Object] so i think its nearly there. I tried using dot notation (item.country) but I still need to work out how to loop through it and display. Any ideas?
Change
$("table.outer tbody").html(_.template( tableTemplate, {items:items} ));
to
$("table.outer tbody").html(_.template( tableTemplate, {items:items.country} ));
and also change
<td><%- item %></td>
to
<td><%- country[key].tarrifType %></td>
Items has a single property: country. Instead of calling the template with items, call it with items.country. Since you have the key in your loop, you can access the object in each iteration. Each object also returns an array of tarrifTypes etc. So you may/may not need to iterate these too.
I also created this fiddle. Although it is not directly relevant with _ templates, it may still give you an idea how to iterate through JS object.
Cheers, =]
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}}