遍历数组内部的数组

时间:2015-03-30 18:48:18

标签: meteor

我想创建一个测验应用程序。为了得到答案,并确定哪个答案是正确的,我在集合中有一个项目如下:

{
"_id" : "Q5D63eQA8AnYHJrRc",
"userId" : "X67n8vbiraEsEvWYD",
"username" : "ania",
"test" : {
    "T1" : {
        "Q1" : "A",
        "Q2" : "D",
        "Q3" : "D"
    },
    "T2" : {
        "Q1" : "A",
        "Q2" : "D",
        "Q3" : "D"
    }
}}

我也尝试使用[表示它是一个数组。

现在我使用:

    <ul class="list-group nav nav-pills nav-stacked">
        {{#each Answers}}
            {{>usernamesList}}
        {{/each}}
    </ul>

</template>

<template name="usernamesList">
    <li><a href="#" class="list-group-item answer">{{username}}</a></li>
    {{test.T1.Q1}}
</template>

我能够获得Q1的值,但是我无法使用另一个{{#each}}显示循环中的每个答案。 我试图创建一个数组,但我还必须区分哪个答案属于哪个问题和测试。

编辑:

集合

Answers = new Mongo.Collection("answers");

助手:

Template.admin.helpers({
    Questions: function() {
        return Questions.find({});
    },
    Answers: function() {
        return Answers.find({});
    }
});

我也试图像这样创建集合:

{"userId" : "X67n8vbiraEsEvWYD",
"username" : "ania",
    "test" : [{
        "T1" :[{ 
         "Q1":"A",
         "Q2":"D",
         "Q3":"D"
    }],
        "T2" : [{
         "Q1":"A",
         "Q2":"D",
         "Q3":"D"
    }]
    }]
}

1 个答案:

答案 0 :(得分:0)

您的usernamesList模板可能有另一个#each用于返回数组的内容。您可以使用帮助程序将要循环的各种对象转换为具有要查看的属性的对象数组。

我不是百分百肯定你在这里要做什么,但似乎你想要三个循环:

Users
  ->  Tests
      ->  Answers

为此,根据您在上面指定的结构,您可以执行以下操作:

<template name='main'>
  <ul class="list-group nav nav-pills nav-stacked">
        {{#each Answers}}
            {{>usernamesList}}
        {{/each}}
    </ul>
</template>

<template name='usernamesList'>  
  <li><a href="#" class="list-group-item answer">{{username}}</a></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>

然后只需使用适当的帮助程序将数据重新格式化为数组:

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', ...}]}]
    });
  }
});

一旦它们是数组,您可以使用{{#each}}迭代它们。认识到{{#each}}块中的HTML将获得您作为数据上下文迭代的对象 - 例如,当我们迭代userTests的结果时,数据上下文现在是一个对象格式:

{test: 'T1', 
  testAnswers: [{question: 'Q1', answer: 'A', ...}]
}

所以testAnswers可以作为数组直接访问。然后我们可以通过调用{{#each testAnswers}}和格式为

的对象来遍历该数组
{question: 'Q1', answer: 'A'}

现在是数据上下文,这意味着questionanswer键可用。

根据您的使用案例以及您可能在集合中对这些对象执行的操作,我可能建议将它们作为数组存储在集合中,这样您就不必像往常一样完成从对象到数组的映射在usersTests帮手。