Loading Fields From Collection Into Select Field And Filtering It Based On Selected Value

Basically i have two questions which are related but i'll separate them with numbers 1) I am trying to load a single field into a select dropdown box from collection but its popula

Solution 1:

Here is how I would proceed. First, the dropdown: you should use a cursor instead of an array of documents. So your helper should be:

Template.categoryFilter.helpers({
    companyCategories: function(){
       return Jobs.find();
    }
});

and your categoryFilter template HTML could be something like this

<templatename="categoryFilter"><divclass="dropdown"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-expanded="true">
    {{selectedCategory}} <!-- refer to an helper which returns the reactive variable--><spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">
  {{#each companyCategories}}
    <lirole="presentation"><arole="menuitem"class="categoryItem"tabindex="-1"href="#">{{yourCatergoryNameField}}</a></li>
  {{/each}}
  </ul></div></template>

You can then create an event to record the current category selected in the dropdown when it is clicked

"click .categoryItem": function(e, t) {
        var text = $(e.target).text()
        Session.set("selectedCategory", text)
    },

Now, you can filter your cars using the selectedCategory reactive variable. For this, you need another helper. It could be for instance:

Template.carList.helpers({
    carListingByCategory: function(){
       var filter = Session.get ("selectedCategory");
       returnCar.find(category:filter)
    }
});

That should do the trick. I never use Session, so it might not work as I suppose it does. If it does not work, use ReactiveDict instead. Basically, you add var pageSession = new ReactiveDict(); at the beginning of your doc and you can replace Session with pageSession in my code.

EDIT

Ok, let's have a try with underscore. Based on this answer, here is what you can do to return all the distinct categories for every item of allJobs:

Template.categoryFilter.helpers({
    companyCategories: _.uniq(Collection.find({}, {
        sort: {myField: 1}, fields: {myField: true}
    }).fetch().map(function(x) {
        return x.myField;
    }), true);
    }
});

where myfield is your categories array field.

EDIT 2

Try to change your html and replace {{justCategory}} with {{this}}:

<templatename="categoryFilter"><divclass="input-field"><select><optionvalue=""disabledselected>Choose your option</option>
    {{#each companyCategories}}
      {{> companyCategory}}
    {{/each}}
   </select><label>Select Category</label></div></template><templatename="companyCategory"><option>{{this}}</option></template>