Filtering records according to dropdownlist

Question

I need to filter the listing or records according to selection in dropdownlists. I have three dropdowns that needs to filter the records reactively in collaboration with each other. i.e value selection in one dropdownlist should filter the records effected by other dropdownlist values.

var filterAndLimitResults = function (cursor) {

    if (!cursor) {
        return [];
    }

    var raw = cursor.fetch();

    var currentChosenCategory = chosenCategory.get();
    var currentChosenCity = chosenCity.get();
    var currentJtype = chosenJtype.get();

    console.log(currentChosenCategory);
    console.log(currentChosenCity);
    // filter category
    var filtered = [];
    if (!currentChosenCategory || currentChosenCategory == "" && !currentChosenCity || currentChosenCity == "" && !currentJtype || currentJtype == "")
    {
        filtered = raw;
      //  console.log(filtered);
    }
    else {

        filtered = _.filter(raw, function (item) {
          if(currentChosenCategory){
            return item.ccategory === currentChosenCategory ;
          }
          if(currentChosenCity){
            return item.city === currentChosenCity ;
            console.log(item.city === currentChosenCity);
          }
        });
      }

var currentLimit =limit.get();
//enforce the limit
if (currentLimit ) {
    filtered = _.first(filtered, currentLimit );
}
return filtered;
};

the above code is doing both filtering the dropdowns and limit the number of records so as to give infinite scrolling.

Edit For Text Based Search

Here is my eventmap for seach box

"keyup #search-title":function(e,t){
     if(e.which === 27){
       searchTitle.set("");
     }
     else {
       var text = $(e.target.val);
       searchTitle.set(text)
       console.log(searchTitle.set(text));
     }
   }

This is what iam doing in the filteredAndLimitResults

if(!(!currentSearchTitle || currentSearchTitle == "")) {
      filtered = _.filter(filtered, function (item) {
              return item.title === currentSearchTitle ;
              console.log(item.title === currentSearchTitle);
      });
    }

when i am typing something in the search box. all the records vanishes and when in press esc it comes back to as it was. in console.log i can see that on everytime i press a key it returns the collection.

Answer 1

You need to enforce the filters one after the other. Try like that:

var filterAndLimitResults = function (cursor) {

    if (!cursor) {
        return [];
    }

    var raw = cursor.fetch();

    var currentChosenCategory = chosenCategory.get();
    var currentChosenCity = chosenCity.get();
    var currentJtype = chosenJtype.get();

    console.log(currentChosenCategory);
    console.log(currentChosenCity);
    // filter category
    var filtered = [];
    if (!currentChosenCategory || currentChosenCategory == "" || currentChosenCategory === "All categories")
    {
        filtered = raw;
        //  console.log(filtered);
    }
    else {
        filtered = _.filter(raw, function (item) {
            if(currentChosenCategory){
                return item.ccategory === currentChosenCategory ;
            }
        });
    }
    // filter city
    if (!(!currentChosenCity || currentChosenCity == "" || currentChosenCity === "All cities"))
 {
        filtered = _.filter(filtered, function (item) {
            if(currentChosenCity){
                return item.city === currentChosenCity ;
                console.log(item.city === currentChosenCity);
            }
        });
    }
    // filter JType
    if (!(!currentJtype || currentJtype == "" || currentJtype === "All Jtypes"))
 {
        filtered = _.filter(filtered, function (item) {
            if(currentJtype){
                //update the item.ccategory with the right field
                return item.ccategory === currentJtype ;
            }
        });
    }
    var currentLimit =limit.get();
    //enforce the limit
    if (currentLimit ) {
        filtered = _.first(filtered, currentLimit );
    }
    return filtered;
};