Meteor Category and Subcategory Select Menu

Question

I am new to Meteor but acquired some fair knowledge of this framework. I am creating one App in which I have to Build a Category Management Module, I am using a Category collection for this and in the document my values are like this

{
_id:
name:
parentID:

.....
}

I have tried few things to make it recursive, but failed to do it, what I need is a drop down which contains all the categories with their children. like this:

http://blog.digibali.com/wp-content/uploads/2011/03/menutree2.jpg

I would appreciate if anyone here can help in this issue:

Right Now what I am doing is fetching me to only 2 levels, I mean Top Parent and a Sub Child, I want unlimited levels for this, I know it might be possible through recursive function, but unable to find the way

Template:

<template name="categoryselect">

<select id="category" name="category" class="category">
<option value="">--Select--</option>
{{#each get_categories}}
<option value="{{_id}}">{{name}}</option>
{{#each get_sub_categories}}
{{> subcategoryselect}}
{{/each}}
{{/each}}

</select>

</template>


<template name="subcategoryselect">
<option value="{{_id}}">--{{name}}</option>
</template>

Template Helpers :

Template.categoryselect.helpers({
'get_categories': function(){
return Categories.find({parentID:''});

},

'get_sub_categories': function(){
return Categories.find({parentID:this._id});
}

});

Answer 1

Here's a tested solution:

html

<template name="categoryselect">
  <select id="category" name="category" class="category">
    <option value="">--Select--</option>
    {{#each get_categories}}
      <option value="{{_id}}">{{name}}</option>
    {{/each}}
  </select>
</template>

js

Template.categoryselect.helpers({
  get_categories: function() {
    var results = [];

    var mapChildren = function(category, level) {
      // add the appropriate number of dashes before each name
      var prefix = Array(2 * level).join('--');
      results.push({_id: category._id, name: prefix + category.name});

      // repeat for each child category
      var children = Categories.find({parentID: category._id}).fetch();
      _.each(children, function(c) {
        // make sure to increment the level for the correct prefix
        mapChildren(c, level + 1);
      });
    };

    // map each of the root categories - I'm unsure if the parent
    // selector is correct or if it should be {parentId: {$exists: false}}
    _.each(Categories.find({parentID: ''}).fetch(), function(c) {
      mapChildren(c, 0);
    });

    // results should be an array of objects like {_id: String, name: String}
    return results;
  }
});