CODEWITHSUNDEEP
meteor
Anurag Phadke
Anurag Phadke

Reputation: 428

navigating array inside a collection and nested templates in meteor

I am playing around with meteor and trying to create a simple quiz application using the same. I have setup my questions collection this way:

{question: "Why did the chicken cross the road??", choices: ["To eat", "To die", "It depends", "There is no chicken"], correctAnswer:2, number : 1}, 
{question: "Who was the first man to step on moon's surface?", choices: ["Yo Yo Honey Singh", "Neil Armstrong", "Buzz Eldrin", "Rakesh Sharma"], correctAnswer:1, number : 2},       
{question: "Where is Timbuktu? ", choices: ["Asia", "There is no such place", "Africa", "Europe"], correctAnswer:2, number : 3}, 
{question: "Who said 'there is no pill'?", choices: ["Morpheus", "Mr. Anderson", "Neo", "Yoda"], correctAnswer:0, number : 4}, 
{question: "What is the one thing that saved Arthur Dent's life multiple times?", choices: ["The bugblatter beast of Tral", "Ford Perfect", "A towel", "The babel fish"], correctAnswer:2 , number : 5}

I am able to get the question from the collection but struggling with getting the options for each question (which are stored in an array as shown above). I created two templates, one for the question stem and the second one for the choices. The options template is nested inside the question template like so:

<template name="question">
  <p>{{ currentQuestion.question }}</p>
    <form>
      {{ #each currentQuestion.choices }}
      <div class="radio answers">
        {{> choices}}
     </div>
     {{ /each }}
    </form>
  </p>
</template>
<template name="choices">
    <input type="radio" name="answer" id="{{ choice }}"><label for="{{ choice }}">{{ choice }}</label><br>
</template>

Obviously this is not working. Now my questions are:

Thanks in advance. Looking forward to some solutions for this.

Cheers..

Upvotes: 0

Views: 283

Answers (1)

Kuba Wyrobek
Kuba Wyrobek

Reputation: 5273

<template name="questions">
   {{#each questions}}
      {{> question}}
   {{/each}}
</template>

<template name="question">
    <p>{{ question }}</p>
    <form>
      {{ #each choices }}
        <div class="radio answers">
          {{> choices}}
        </div>
      {{ /each }}
    </form>
</template>

<template name="choices">
    <input type="radio" name="answer" id="{{ this }}"><label for="{{ this }}">{{ this }}</label><br>
</template>

See working sample in meteorpad

Upvotes: 1

Related Questions