How to access one specific array element with Meteor?

help
1

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});

};

2

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>
3

Thank you for your reply can I do this without using return with the code I show you?

4

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
5

Yup that’s it.I didn’t know the #with .Thank you again for immediate response and help.