Group subcategory in category

Question

How can I group subcategory in category that they belongs to? For example category is ICT and I want only subcategory (such as laptop,komputer,etc.) that belongs to ICT display in the dropdown.

addItem.html

 <template name="addItem">
    <div class="form-group">
                <select class="form-control" name="category_name">
                    <option selected> --Category-- </option>
                    {{#each category}}
                        {{> downCategory}}
                    {{/each}}
                </select>   
                </div>
            
                <div class="form-group">
                <select class="form-control" name="subcategory_name">
                    <option selected> --Subcategory-- </option>
                    {{#each subcategory}}
                        {{> downSubcategory}}
                    {{/each}}
                </select>   
                </div>
    </template>


<template name="downCategory">
    <option id="{{_id}}">{{category_name}} </option>
</template>

<template name="downSubcategory">
    <option id="{{_id}}">{{subcategory_name}} </option>
</template>

addItem.js

Template.addItem.helpers({
    category: function(){
        return Category.find({});
    },
    subcategory: function(){
        return Subcategory.find({});
    }
});

Answer 1

I would imagine that you'll need to have a hierarchical data structure for your categories, you can do this easily when creating categories have an optional parentId field on your category, and then query for subcategories by the id of the category your subcategories belong to.

addItem.html

 <template name="addItem">
    <div class="form-group">
                <select class="form-control cat-select" name="category_name">
                    <option selected> --Category-- </option>
                    {{#each category}}
                        {{> categoryOptions}}
                    {{/each}}
                </select>   
                </div>

                <div class="form-group">
                <select class="form-control" name="subcategory_name">
                    <option selected> --Subcategory-- </option>
                    {{#each subcategory}}
                        {{> categoryOptions }}
                    {{/each}}
                </select>   
                </div>
    </template>


<template name="categoryOptions">
    <option id="{{ _id }}">{{ name }} </option>
</template>

addItem.js

Template.addItem.helpers({
    category: function(){
        return Category.find({});
    },
    subcategory: function(){
        var id = Session.get('selectedCategory');
        return id ? Subcategory.find({parentId: id}) : false;
    }
});

Template.addItem.events({
    'change .cat-select': function(e, t) {
        //... get the selected option and set a var called carId then set a session var to make it available 
        var catId = $(e.target).val() || false;
        Session.set('selectedCategory', catId);
    }
});

Answer 2

I have solved the question. And it can be reference to anyone who had the same problem.. :)

addItem.html


<template name="allCategory">
        <div class="form-group">
            <select class="form-control category-selection" name="name_category">
                <option selected> --Category-- </option>
                {{#each category}}
                    {{> downCategory}}
                {{/each}}
            </select>   
        </div>

</template>

<template name="allSubcategory">
            <div class="form-group">
            <select class="form-control subcategory-selection" name="name_subcategory">
                <option selected> --Subcategory-- </option>
                {{#each subcategory}}
                    {{> downSubcategory}}
                {{/each}}
            </select>   
            </div>


</template>


<template name="downCategory">
    <option id="{{_id}}"> {{name_category}} </option>
</template>

<template name="downSubcategory">
    <option id="{{_id}}"> {{nama_subcategory}} </option>
</template>

addItem.js

    enter code here

Template.allCategory.helpers({
    category: function(){
        return Category.find({});
    }
});

Template.allCategory.events({
    "change .category-selection": function(e, t){
      return Session.set("category", $("[name=name_category]").val());
    }
  });

Template.allSubcategory.helpers({
    subcategory: function(){
        return Subcategory.find({
            category_id: Session.get('category')
        });
    }
});