How to Load Array values to Template Variable in Meteor JS?

Question

How to Load Array values to Template Variable in Meteor?. Please see the below code and suggest me what to do?

HTML Code :

 <template name="header">
 <div class="header">
    {{#each alphabets}}
       <div class="alphabets">{{this}}</div>
    {{/each}}
 </div>
</template>

JS Code :

 //the below array values are load dynamically above template
 var Alphas = ['ALL',
              'A', 'B', 'C', 'D','E', 'F',
              'G', 'H', 'I', 'J','K', 'L',
              'M', 'N', 'O', 'P','Q', 'R',
              'S', 'T', 'U', 'V','W', 'X',
              'Y', 'Z'
              ]

        Template.header.alphabets = function (i)
         {
           return Alphas[i];
         };

Serkan Durusoy · Accepted Answer · 2014-02-14 10:25:36Z

10

Template html:

<template name="header">
  <div class="header">
    {{#each alphabets}}
      <div class="alphabets">{{this}}</div>
    {{/each}}
  </div>
</template>

Template js:

var Alphas = ['ALL',
              'A', 'B', 'C', 'D','E', 'F',
              'G', 'H', 'I', 'J','K', 'L',
              'M', 'N', 'O', 'P','Q', 'R',
              'S', 'T', 'U', 'V','W', 'X',
              'Y', 'Z'];

Template.header.alphabets = function() {
  return Alphas;
};

I tested this and it works.

Basically, you can pass arrays just like cursors and each will iterate them both the same.

If you have key/value pairs in your array, you can address them just like mongo documents as well.

answered Feb 14, 2014 at 10:25

Serkan Durusoy

5,4622 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hubert OG · Accepted Answer · 2014-02-14 10:24:40Z

1

Helpers usually return the whole array, not individual indexed element. Looping is done by the {{#each}} block. So your helper shouldn't have the parameter, and look simply like that:

Template.header.alphabets = function () {
    return Alphas;
};

And you call it directly, with no reference to Alphas (since your template doesn't know that variable).

{{#each alphabets}}
    <div class="alphabets">{{this}}</div>
{{/each}}

This is pretty natural when you think about it this way: for #each element of alphabets, print a div containing this element.

answered Feb 14, 2014 at 10:24

Hubert OG

19.6k7 gold badges48 silver badges73 bronze badges

Comments

ParTYZane · Accepted Answer · 2015-08-20 19:06:01Z

1

Template.header.alphabets

depricated.

Use Template.templateName.helpers insteed.

<template name="newTextLabel">
  {{#each textType}}
  <span class="label label-primary pull-right">{{this}}</span>
  {{/each}}
</template>

Template.newTextLabel.helpers ({
    textType: function() {
    var xxx = ZZZ.findOne(this);
    return xxx.tag;
}
})

collection ZZZ has documents with array named 'tag'

answered Aug 20, 2015 at 19:06

ParTYZane

2312 silver badges4 bronze badges

Comments

Melih · Accepted Answer · 2015-02-25 12:04:15Z

0

Instead iterate over an array you can use all array values as below

<template name="alphabet-template">
  {{#if alphabets}}
    <div class="post-alphabet">
      <p> Element: {{alphabets}}</p>
    </div>
  {{/if}}
</template>

edited Feb 25, 2015 at 12:04

answered Feb 25, 2015 at 8:35

Melih

4735 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to Load Array values to Template Variable in Meteor JS?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related