Meteor: how to display lists using an array of an array of cursors on the html page

Question

This question is related to this one here, where I use ingredient-recipe relationship to represent the relationship between Item and Group of Items. After successful insertion of Items and Groups, where one of the fields in each Group is an array of the ids of Items, the question is how I can list these Items and Groups on the associated html page.

I tried the JS code below; for items it returns a straightforward cursor, for groups it returns an array (due to there being multiple groups) of array (multiple items for each group) of cursors:

   Recipes = new Mongo.Collection("recipes");
   Ingredients = new Mongo.Collection("ingredients");

   Template.body.helpers({
       ingredients: function() {
           // return 
           var returnedingredients = Ingredients.find({}, {
               sort: {

                   createdAt: -1
               }
           });
           // console.log(returnedingredients);
           return returnedingredients;
       },
       recipes: function() {
           //Show newest recipes at the top
           var itemIds = Recipes.find({}, {
               sort: {
                   createdAt: -1
               },
               // _id: 1
           }).map(function(i) {
               return i.itemIds;
           });
           // return 
           var returnedrecipes = _.map(itemIds, function(oneRecipe) {
               var ingredientsOfRecipe = _.map(oneRecipe, function(itemId) {
                   return Ingredients.find({}, {
                       _Id: itemId
                   });

               });
               // console.log(ingredientsOfRecipe);
               return ingredientsOfRecipe;
           });
           console.log(returnedrecipes);
           return returnedrecipes;
       },
   });

The associated html code. Body part:

<h2>recipes</h2>
<ul>
    {{#each recipes}} {{> recipe}} {{/each}}
</ul>
<h2>List of ingredients</h2>
<ul>
    {{#each ingredients}} {{> ingredient}} {{/each}}
</ul>

Template part:

<template name="ingredient">
    <li class="{{#if checked}}checked{{/if}}">
        <button class="delete">&times;</button>
        <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
        <span class="text">{{ingredientName}}</span>
    </li>
</template>
<template name="recipe">
    <li class="{{#if checked}}checked{{/if}}">
        <button class="delete">&times;</button>
        <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
        <li>
            <ul>
                {{#each this}}
                <li>{{ingredientName}}</li>
                {{/each}}
            </ul>
        </li>
    </li>
</template>

The page displays the list of items/ingredients on their own correctly. But it fails to display the list of groups/recipes (or rather, the intention is to display a list of ingredients for each recipe). Two questions: 1. For the purpose of displaying recipes on the page, is returning the array of array of cursors from the JS code the way to go? 2. What did I do wrong in handling the array of array of cursors?

score 1 · Accepted Answer · answered Nov 26 '15 at 16:48

Related collections can be done in a very straightforward manner:

html:

<template name="ListOfRecipes">
<h2>Recipes</h2>
  {{#each recipes}}
    {{> recipe}}
    <h3>Ingredients</h3>
    {{#each ingredients}}
      {{> ingredient))
    {{/each}}
  {{/each}}
</template>

js:

Template.listOfRecipes.helpers({
  recipes: function(){
    return Recipes.find({},{sort: {createdAt: -1}});
  },
  ingredients: function(){
    return Ingredients.find({_id: {$in: this.itemIds}},{sort: {createdAt: -1}});
  }
});

In the ingredients helper this is an individual recipe object.

Meteor: how to display lists using an array of an array of cursors on the html page

1 Answers1