Meteor dynamic category list

Question

I would like to do the following. I would like to create a categories page that loads each category onto a picture. Then when a user clicks a category the parameter would show up on the url and it will search the database for photos based on that category. I will now demonstrate the code that I have.

Categories HTML File:

<template name="categories">
    <div class="text-center light-container" id="categories-section">
        <h1>Categories</h1>
        <hr/>
        {{#each categories}}
            <div class="image-container">
                <a href="{{pathFor route='categoryPage'}}">
                    <img class="freezeframe pics" src="images/app/sphere.jpg"/>
                </a>
                <h2><span>{{categories}}</span></h2>
            </div>
        {{/each}}
    </div>
</template>

Categories JS File:

var categoryList = ['actions', 'animals', 'anime', 'art/design', 'cartoons/comics', 'celebrities',
 'Emotions', 'Food/Drink', 'Games', 'History', 'Holidays', 'Memes', 'Movies', 'Music', 'Nature', 'News/Politics',
 'Science', 'Sports', 'Technology', 'TV'];

Template.categories.helpers({
    'categories':function(){
        for(var i = 0; i < categoryList.length; i++){
            console.log(categoryList[i]);
            return categoryList[i];
        }
    }
});

Router JS File:

Router.route('/categories', {
    name: 'categories',
    template: 'categories',
    fastRender: true
});
Router.route('/categories/:category', {
    name: 'categoryPage',
    template: 'categoryPage',
    data: function(){
        var category = this.params.category;
        return GifsCollection.find({category: category});
    },
    fastRender: true
});

CategoryPage JS:

Template.categoryPage.helpers({
    // Load 16 most recent ones
    // When down arrow is click load another 16 more gifs
    gifs: function() {
        var category = this.params.category;
        return GifsCollection.find({category: category}, {fields: {_id: 1, image: 1} });
    }
});

Running the following code doesn't get me anywhere. I'm not sure which path to take. I can create a 'category' collection and load the helpers onto there or I can use sessions? but I'm leaning onto creating category collection however I'm pretty sure there is a much more efficient way.

Any feedback and code help would be greatly appreciated!!!

Answer 1

You have two small errors. One we already discussed in comments, regarding the helper. The other is in how you use the #each loop: inside of it you can just refer to this to get the string of your category.

Categories HTML File:

<template name="categories">
    <div class="text-center light-container" id="categories-section">
        <h1>Categories</h1>
        <hr/>
        {{#each categories}}
            <div class="image-container">
                <a href="/categories/{{this}}">
                    <img class="freezeframe pics" src="images/app/sphere.jpg"/>
                </a>
                <h2><span>{{this}}</span></h2>
            </div>
        {{/each}}
    </div>
</template>

Categories JS File:

var categoryList = ['actions', 'animals', 'anime', 'art/design', 'cartoons/comics', 'celebrities',
 'Emotions', 'Food/Drink', 'Games', 'History', 'Holidays', 'Memes', 'Movies', 'Music', 'Nature', 'News/Politics',
 'Science', 'Sports', 'Technology', 'TV'];

Template.categories.helpers({
    'categories':function(){
        return categoryList;
    }
});