for each item in array {{display item}} - javascript

I am trying to access the array values in my code so that I can use them but I am not sure how to. Thanks
var footerButtons = ['NO', 'EXTRA', 'YES'];
<template name="footer">
{{#each footerButtons}}
<h1>
<button class="col-xs-2 mainMenu" type="button">{{what should go here?}}</button>
</h1>
{{/each}}
</template>

You could define your footerButtons helper as follows -
Template.footer.helpers({
footerButtons() {
return [{text: 'NO'}, {text: 'EXTRA'}, {text: 'YES'}];
}
});
Then in your template, you can access the values as shown below.
<template name="footer">
{{#each footerButtons}}
<h1> <button class="col-xs-2 mainMenu" type="button">{{text}}</button> </h1>
{{/each}}
</template>

{{.}} or {{this}} is what you're looking for. This refers to the current object/element in an array.

Related

Rendering VUE slot only if content matches specific value

I have two routes that render the same component but with different data coming from an API.
This component has a child component called <base-section> that has a v-if directive that checks if a specific slot has content or not (because if it has no content, I don't want the slot to show).
However, there might be more than one instance of this child component on the same parent component, and therefore, if one of the instances has content in the slot, but the other one doesn't, VUE will automatically assume that all slots have content.
Therefore, I would like to know if there is any way of checking the specific slot content of each instance and then compare it with the data coming from the API. Please find my code below:
Parent component (Content.vue)
<template>
<base-section
v-for="entry in this.entries"
:key="entry.title"
lang="lang-markup"
:title="entry.title"
>
<template v-slot:content>
<span v-html="entry.content"></span>
</template>
<template v-slot:examples>
<div v-html="entry.examples"></div>
</template>
<template v-slot:code>
{{ entry.code }}
</template>
</base-section>
</template>
Child component (BaseSection.vue)
<template>
<hr class="my-6" />
<h4 class="text-salmon">{{ title }}</h4>
<section>
<div class="section-sm txt-justify" v-if="this.$slots.content">
<slot name="content"></slot>
</div>
<span class="medal bg-light text-dark code-medal">Examples</span>
<div class="section-sm border-light-1 mb-3">
<slot name="examples"></slot>
</div>
<span class="medal text-dark code-medal">Code</span>
<pre :class="lang + ' border-light-1 bg-light'">
<code><slot name="code"></slot></code>
</pre>
</section>
</template>
The data coming from the API follows this structure:
getData() {
const url = this.apiUrl + this.$route.name + this.apiToken
fetch(url)
.then((collection) => collection.json())
.then((collection) => {
const entries = [];
this.entries = [];
for (const id in collection.entries) {
if (collection.entries[id].Version === this.byteVersion) {
entries.push({
title: collection.entries[id].Title,
content: collection.entries[id].Content,
examples: collection.entries[id].Examples,
code: collection.entries[id].Code,
});
}
}
this.entries = entries;
});
}
Thank you very much for your help!
Regards,
T.
Maybe you can pass the "entry.content" into your BaseSection component. and v-if the entryContent.
Parent component (Content.vue)
<template>
<base-section
v-for="entry in this.entries"
:key="entry.title"
lang="lang-markup"
:title="entry.title"
:entryContent="entry.content"
>
<template v-slot:content>
<span v-html="entry.content"></span>
</template>
<template v-slot:examples>
<div v-html="entry.examples"></div>
</template>
<template v-slot:code>
{{ entry.code }}
</template>
</base-section>
</template>
Child component (BaseSection.vue)
<div class="section-sm txt-justify" v-if="entryContent">
<slot name="content"></slot>
</div>
Or you can v-if your content template
<template v-slot:content v-if="entry.content">
<span v-html="entry.content"></span>
</template>

METEOR JS. A variable in each loop

HTML
<template name="contact">
...
{{> FORMULAIRE descrip =descripFormContact }}
...
</template>
<template name="FORMULAIRE" >
<form id={{descrip.idForm}} >
<fieldset id="idFieldSet{{descrip.idForm}}">
{{#each descrip.champs}}
<span id="idSpanLabel{{descrip.idForm}}" ....>{{this.label}}</span>
...
{{/each}}
</fieldset>
</form>
</template>
JS
Template.contact.helpers({
descripFormContact: {
idForm: 'formContact',
champs: [{
nomChp: 'prenom', label: 'Prenom : ', type: 'text', oblig:true,
}]
}
})
All is OK but I can't seem to find the value of "descrip.idForm" in the loop "each".
Can someone tell me why, in the loop "each", "descrip.idForm" is empty, then that the outside of the loop is equal to "formContact"
Thank you for your answer
YC
Could you remove the space between descript and = in your FORMULAIRE template call.
Regs,yann

List all keys and values of blaze object

I have inserted this data in mongo
db.orders.insert( { _id: ObjectId().str, name: "admin", status: "online",catalog : [
{
"objectid" : ObjectId().str,
"message" : "sold",
"status" : "open"
}
]})
and i am accessing the data this way
<template name="Listed">
<div class="row">
{{#each list}}
<article class="post">
<h3>{{_id}}</h3>
<h3>{{name}}</h3>
<br>
<h3>{{status}}</h3>
<br>
{{#each catalog }}
<h3></h3>
<h3>{{status}}</h3>
{{/each}}
<div class="well"></div>
<br/>
</article>
<br/><br/>
{{/each}}
</div>
</template>
I am interested in knowing the key/value pair of the catalog object.
The reason for this,is because,i do not know the fields catalog has. For that,i registered a helper
Template.registerHelper("keyval",function(object){
return _.map(object, function(value, key) {
return {
key: key,
value: value
};
});
});
and used it this way
<template name="Listed">
<div class="row">
{{#each list}}
<article class="post">
<h3>{{_id}}</h3>
<h3>{{name}}</h3>
<br>
<h3>{{status}}</h3>
<br>
{{#each keyval catalog }}
<h3></h3>
<h3>{{key}}</h3>
<h3>{{value}}</h3>
{{/each}}
<div class="well"></div>
<br/>
</article>
<br/><br/>
{{/each}}
</div>
</template>
When i try to access the key like {{key}} i get 0,1,2... and {{value}} gives an object.
That is not what am looking for. How can i display the key value pairs correctly?.
You are producing an array of arrays (each catalog item maps to a list of key/value pairs). One solution is to iterate over each of the catalog items and then call keyval on it. The structure would look something like this:
{{#each item in catalog}}
{{#each keyval item}}
<h3>{{key}}</h3>
<h3>{{value}}</h3>
{{/each}}
{{/each}}

Iterating over nested each statements in meteorjs (group by category)

I have a list of products, each of which has a category associated with it.
I am trying to list out the products grouped by category similar to this example but I cannot get it it to work. It just shows up a unique list of the categories but not the products
I have the following helper:
Template.supplierPage.helpers({
getCategories: function(){
var categories = Products.find({supplierId: this._id},
{sort:{category: 1}, fields: {category: 1}}).fetch();
return _.uniq( categories, true, function (product){
return product.category;
});
},
products: function(category) {
return Products.find({category: category, supplierId: this._id});
}
});
And the following template:
<template name="supplierPage">
<div class="ui dividing header">
<h3 class="ui header">My Products</h3>
</div>
<div>
{{> productCreate}}
{{#each getCategories}}
<h1>{{category}}</h1>
{{#each products.category}}
{{> productItem}}
{{/each}}
{{/each}}
</div>
Any help would be greatly appreciated. Thanks.
You almost got it right. You are just not providing the argument to the products helper in the right way. This should work:
<template name="supplierPage">
<div class="ui dividing header">
<h3 class="ui header">My Products</h3>
</div>
<div>
{{> productCreate}}
{{#each getCategories}}
<h1>{{category}}</h1>
{{#each products category ../_id}}
{{> productItem}}
{{/each}}
{{/each}}
</div>
You also need to fix your use of this in the products helper, because it changes when using #each. The easiest is to provide it as an additional argument as above:
products: function(category, supplier) {
return Products.find({category: category, supplierId: supplier});
}

Multiple loops fail in Handlebars.js

In my Handlebars template, I am trying to loop over the same data twice, but it fails on the second loop. This is how my template looks:
<div id="placeholder"></div>
<script type="text/x-handlebars" id="people-template">
First loop:<br />
<ul>
{{#.}}
<li>{{name}}</li>
{{/.}}
</ul>
Second loop:<br />
<ul>
{{#.}}
<li>{{name}}</li>
{{/.}}
</ul>
</script>
And this is the JavaScript:
var context= [
{ name: "John Doe", location: { city: "Chicago" } },
{ name: "Jane Doe", location: { city: "New York"} }
];
var template = Handlebars.compile($("#people-template").text());
var html = template(context);
$('#placeholder').html(html);
However, it does not render anything for the second loop:
First loop:
John Doe
Jane Doe
Second loop:
I created a jsFiddle for this here: http://jsfiddle.net/G83Pk/ and have even logged this in as a bug https://github.com/wycats/handlebars.js/issues/408. Does anyone know how to fix this or know what the problem is?
As far as I know, the correct way to iterate over an array is through a each block helper
Your template would be written as
<script type="text/x-handlebars" id="people-template">
First loop:<br />
<ul>
{{#each .}}
<li>{{name}}</li>
{{/each}}
</ul>
Second loop:<br />
<ul>
{{#each .}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
An updated Fiddle http://jsfiddle.net/nikoshr/G83Pk/1/
<div id="placeholder"></div>
<script id="people-template" type="text/x-handlebars">
First loop:<br />
<ul>
{{#each context}}
<li>{{name}}</li>
{{/each}}
</ul>
Second loop:<br />
<ul>
{{#each context}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var template = Handlebars.compile($("#people-template").html());
var json = {
"context": [
{ "name": "John Doe", "location": { "city": "Chicago" } },
{ "name": "Jane Doe", "location": { "city": "New York"} }
]
};
var html = template(json);
$('#placeholder').html(html);
</script>
You need to correct your iterator to use the each block helper. And your context variable is invalid input for the each iterator. The above code is the proper way to do what you want.
Not sure with the comments, but I encountered very strange behavior while having similar kind of scenario in my code.
{{#with xxxxx}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Worked here
{{/with}}
{{/each}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Didn't Worked here
{{/with}}
{{/each}}
{{/with}}
It worked with first loop but didnt worked with second loop. I did all scenarios at the ended with some strange solution. If I add any Html script or comment at the end of {{#each models}} of second loop, then second loop regains its context and display values properly.
So this worked flawlessly.
{{#with xxxxx}}
{{#each models}}
{{#with attributes}}
{{value}} ---- Worked here
{{/with}}
{{/each}}
{{#each models}} {{! Comment added }}
{{#with attributes}}
{{value}} ---- It works now.
{{/with}}
{{/each}}
{{/with}}

Categories