Question

I make one collection Recipes and then define its schema and i have one array of objects ingredients in my schema and now i want to access those array of objects in my template but unable to show them can you please guide me how to do it?

collections.js

  Recipes = new Mongo.Collection('recipes');
    Recipes.attachSchema(new SimpleSchema({
        name: {
            type: String,
            label: "Recipe Name",
            max: 100
        },

            ingredients: {
                type: [Object],
                minCount: 1
            },

        "ingredients.$.name": {
        type: String
            },
        "ingredients.$.amount": {
        type: String
        },
        description: {
            type: String,
            label: "How to prepare ",
        },
        time: {
            type: Number,
            label: "Time (Minutes)",
        },
        image: {
            type: String,

            autoform: {
                afFieldInput: {
                    type: "cfs-file",
                    collection: 'recipesImages',
                    label: 'Recipe Picture'
                }
            }
        }
    }));

router.js

Router.route('/show_recipe/:_id', {
    name: 'show_recipe',
    template: 'show_recipe',
    data: function() {
        return Recipes.findOne(this.params._id);
    }
});

show_recipe.html

<template name="show_recipe">
    <div class="container">
        <div class="row">

            <div class="col-md-8">

                {{#with FS.GetFile "recipesImages" image}}
                    <img class="img-responsive mt" src="{{url}}"/>
                {{/with}}
            </div>
            <div class="col-md-4" >
                <ul class="list-group">

                    <h3> Ingredients</h3>
                        <li class="list-group-item">{{ingredients.name}} - {{ingredients.amount}}</li>
                </ul>

            </div>

        </div>
        <div class="row">
            <div class="col-md-8">
                <h4>{{name}}</h4>
                <p> {{description}}</p>
            </div>
        </div>
    </div>
</template>

Answer 1

You're only missing an {{#each}} to iterate over the ingredients array. Using it will set the data context to one element of the array and then you can just access the keys directly: <h3> Ingredients</h3> {{#each ingredients}} <li class="list-group-item">{{name}} - {{amount}}</li> {{/each}}

access array of objects inside template

1 个答案: