Iterate through array inside array - meteor

Question

I want to create a quiz application. To sumarize answers, and decide which answer is correct, I have an item in the Collection like this:
{
"_id" : "Q5D63eQA8AnYHJrRc",
"userId" : "X67n8vbiraEsEvWYD",
"username" : "ania",
"test" : {
"T1" : {
"Q1" : "A",
"Q2" : "D",
"Q3" : "D"
},
"T2" : {
"Q1" : "A",
"Q2" : "D",
"Q3" : "D"
}
}}
I've also tried to use [ to indicate that it's an array.
Right now I use:
<ul class="list-group nav nav-pills nav-stacked">
{{#each Answers}}
{{>usernamesList}}
{{/each}}
</ul>
</template>
<template name="usernamesList">
<li>{{username}}</li>
{{test.T1.Q1}}
</template>
I'm able to get the value of Q1, but I can't display every answer in the loop by using another {{#each}}.
I've tried to create an array, but I also have to distinguish which answer belongs to which question and test.
EDIT:
Collection
Answers = new Mongo.Collection("answers");
Helper:
Template.admin.helpers({
Questions: function() {
return Questions.find({});
},
Answers: function() {
return Answers.find({});
}
});
I've also tried to create the collection like this:
{"userId" : "X67n8vbiraEsEvWYD",
"username" : "ania",
"test" : [{
"T1" :[{
"Q1":"A",
"Q2":"D",
"Q3":"D"
}],
"T2" : [{
"Q1":"A",
"Q2":"D",
"Q3":"D"
}]
}]
}

Answer 1

Your usernamesList template could have another #each for something that does return an array. You can use a helper to convert the various objects you want to loop through into arrays of objects with the properties you want to see.
I'm not 100% sure what you're going for here, but it seems like you want three loops:
Users
-> Tests
-> Answers
To do so, given the structure you specify above, you could do something like this:
<template name='main'>
<ul class="list-group nav nav-pills nav-stacked">
{{#each Answers}}
{{>usernamesList}}
{{/each}}
</ul>
</template>
<template name='usernamesList'>
<li>{{username}}</li>
<ul><!-- get each test as a sub-bullet -->
{{#each usersTests}}
<li>{{name}}</li>
<ul><!-- get each question's answer as a sub-bullet -->
{{#each testAnswers}}
<li><strong>{{question}}</strong>: {{answer}}</li>
{{/each}}
</ul>
{{/each}}
</ul>
</template>
Then just reformat your data to be in arrays with the appropriate helpers:
Template.main.helpers({
Answers: function() { return Answers.find(); } // assumes you are returning a cursor that looks exactly as your collection is defined above
});
Template.usernamesList.helpers({
usersTests: function() { // Convert the `test` object into an array of objects:
var test = this.test;
return _.map(Object.keys(test), function(key) {
var answers = _.map(Object.keys(test[key]), function(question) { // also go ahead and convert this to objects
return {question: question, answer: test[key][question]};
});
return {name: key, testAnswers: answers}; // resulting array looks like [{test: 'T1', testAnswers: [{question: 'Q1', answer: 'A', ...}]}]
});
}
});
Once they are arrays you can iterate through them with {{#each}}. Recognize that HTML within the {{#each}} block will get the object you're iterating over as the data context -- so for instance when we iterate over the result of userTests, the data context is now an object in the format:
{test: 'T1',
testAnswers: [{question: 'Q1', answer: 'A', ...}]
}
So testAnswers is directly accessible as an array. We can then iterate over that array by calling {{#each testAnswers}}, and an object in the format
{question: 'Q1', answer: 'A'}
is now the data context, which means the question and answer keys are available.
Depending on your use case and what you may be doing with those objects in the Collection, I might recommend storing them as arrays within the collection itself so that you don't have to go through the mapping from object to array as done in the usersTests helper.