Why does #each tag not accept an array?

Question

My optionData.js is as follows:

"options"=
[
{
  "option_text": "Just Me",
  "option_image": "just-me.svg",
  "option_is_selected": false
},
{
  "option_text": "Spouse/Partner",
  "option_image": "spouse-partner.svg",
  "option_is_selected": false
},
{
  "option_text": "Child/Children",
  "option_image": "child-children.svg",
  "option_is_selected": false
},
{
  "option_text": "Grand Children",
  "option_image": "grandchildren.svg",
  "option_is_selected": false
},
{
  "option_text": "Parent(s)",
  "option_image": "parents.svg",
  "option_is_selected": false
},
{
  "option_text": "Pet(s)",
  "option_image": "pets.svg",
  "option_is_selected": false
},
{
  "option_text": "Anyone Else",
  "option_image": "anyone-else.svg",
  "option_is_selected": false
}
]

This is my options.js file

calc_option_set1: function(){
    var options_set = this.options;
    option_count = options_set.length;
    upperRowObjects = [];

    if(option_count == 2)
    {
        rowBreak = -1;
    }
    else if(option_count % 2 == 0)
    {
        rowBreak = (option_count / 2);
    }
    else
    {
        rowBreak = (option_count + 1) / 2;
    }

    for(i=0; i<rowBreak; i++)
        upperRowObjects = upperRowObjects + options_set[i];
    return upperRowObjects;
},

This is options.html

{{#each option_set1}}
<div class="col-xs-2">
    <center>
        <img src="/images/{{option_image}}" class="img-responsive img-rounded img-option"/>
        <h5>{{option_text}}</h5>
    </center>
</div>
{{/each}}

Basically I want to divide the options and render them in two different rows(CSS). If I print {{calc_option_set1}} I get the set of objects I want. However, if I try to iterate over them as in the code, I get the error as

"Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values."

How do I iterate over the array returned by the method ? Any way I can assign it to a variable and then use it? Please help...

Could you please look at this answer: http://stackoverflow.com/questions/21234947/meteor-handlebars-how-to-access-a-plain-array — radu florescu, Sep 28 '15 at 18:16
possible duplicate of [Add to Array jQuery](http://stackoverflow.com/questions/5861859/add-to-array-jquery) — Kyll, Sep 28 '15 at 18:38
possible duplicate of [Appending to array](http://stackoverflow.com/questions/351409/appending-to-array) — Mike Cluck, Sep 28 '15 at 20:44

score 2 · Accepted Answer · answered Sep 28 '15 at 18:28

2

Array concatenation does not work with the + operator. Use Array.push() instead.

calc_option_set1: function(){
    var options_set = this.options;
    option_count = options_set.length;
    upperRowObjects = [];

    if(option_count == 2)
    {
        rowBreak = -1;
    }
    else if(option_count % 2 == 0)
    {
        rowBreak = (option_count / 2);
    }
    else
    {
        rowBreak = (option_count + 1) / 2;
    }

    for(i=0; i<rowBreak; i++)
        upperRowObjects.push(options_set[i]);
    return upperRowObjects;
},

and access it with:

{{#each calc_option_set1}}
{{/each}}

answered Sep 28 '15 at 18:28

challett

906
6
16

If that is the answer then the question is a duplicate of https://stackoverflow.com/questions/5861859/add-to-array-jquery – Kyll Sep 28 '15 at 18:36
You also need to change // var options_set = this.options // ...to...// var options_set = options; – meteorBuzz Sep 28 '15 at 19:02

Why does #each tag not accept an array?

1 Answers1