Hello everybody,
I m new to meteor and seems really good.How can i access a specific array element in the code below?I know how {{#each}} works but don t know how let s say img_source:"…/images/earthElemental.png" to appear.Thank you.
if (Meteor.isClient) {
var img_data=[
{
img_source:"…/images/earthElemental.png",
alt:“earth elemental”
},
{
img_source:"…/images/elementalAirPNGI.png",
alt:“air elemental”
},
{
img_source:"…/images/fireElemental.png",
alt:“fire elemental”
},
{
img_source:"…/images/waterElemental.png",
alt:“earth elemental”
}
];
Template.images.helpers({img_data});
};
Here’s a quick example:
test.js
if (Meteor.isClient) {
Template.body.helpers({
imgData() {
return [
{
img_source: '../images/earthElemental.png',
alt: 'earth elemental'
},
{
img_source: '../images/elementalAirPNGI.png',
alt: 'air elemental'
},
{
img_source: '../images/fireElemental.png',
alt: 'fire elemental'
},
{
img_source: '../images/waterElemental.png',
alt: 'earth elemental'
}
];
}
});
}
test.html
<body>
{{imgData.[0].img_source}}
</body>
Thank you for your reply can I do this without using return with the code I show you?
I don’t quite understand your question - are you looking for other ways to achieve the same thing, without having the array in the helper? Here are a few more examples:
test.js
const imgData = [
{
img_source: '../images/earthElemental.png',
alt: 'earth elemental'
},
{
img_source: '../images/elementalAirPNGI.png',
alt: 'air elemental'
},
{
img_source: '../images/fireElemental.png',
alt: 'fire elemental'
},
{
img_source: '../images/waterElemental.png',
alt: 'earth elemental'
}
];
if (Meteor.isClient) {
Template.body.helpers({
getImage(position) {
return imgData[position];
},
getImageSource(position) {
return imgData[position].img_source;
}
});
}
test.html
<body>
<!-- Example 1 -->
{{#with getImage 0}}
{{img_source}}
{{/with}}
<!-- Example 2 -->
{{getImageSource 0}}
</body>
1 Like
Yup that’s it.I didn’t know the #with .Thank you again for immediate response and help.