CODEWITHSUNDEEP
javascriptmeteormeteor-blaze
samuraijack
samuraijack

Reputation: 63

Allow users to filter data contained in the data collection in MeteorJS

Hello application must allow users filtration data contained in the data collection. The filter has to be supported by the checkboxes. The user selects (checkbox) it interesting data (name, address ...) and submit your selection. The table below displays the selected data from the data collection.

Does anyone have an idea how it should look like the code that retrieves data from the collection of data, taking into account filtration made by the user.

My idea was. Get the value of the checkbox and save them in the array and the later inclusion of data from the array in the code to retrieve data from the collection using the subroutine find ().

'change .cd-checkbox-1': function(event, target) {
var x = event.target.checked;
Session.set("statevalue", x);
var array    = [];
if (Session.get("statevalue") === true) {
    $( "[name='inputCheckboxPodmiot']:checked" ).each( function( index, element ) {
      array.push( element.value );
    });
};
var arrayLength = array.length;
for (var i = 0; i < arrayLength; i++) {
    var abiRejestr = WkaRejestrAbi.find( {}, { fields: { array[i]: 1 } } );
}
}

Upvotes: 2

Views: 130

Answers (1)

Ankit
Ankit

Reputation: 1128

One approach is to use Reactive Vars. Sessions are not recommended as they pollute the global namespace.

Example code :

In main.html

<template name="test">
     <input type="checkbox" id="checkbox1" name="name" value="data">Check Me
     <input type="checkbox" id="checkbox2" name="name" value="data">Check Me2
     <input type="checkbox" id="checkbox3" name="name" value="data">Check Me2
      {{showData}}
</template>

In Main.js

 var check_status='';
 //Reactive Var Initialization
 Template.main.onCreated(function (){
       check_status1=new ReactiveVar({});
       check_status2=new ReactiveVar({});
       check_status3=new ReactiveVar({});

 });

 Template.main.helpers({
       showData : function(){
           return Collection.find({$and : [{check_status1.get(),check_status2.get(),check_status3.get()}]}).fetch();
       }
 });

 Template.main.events({
      "change #checkbox1" : function(event) {
            if($(event.currentTarget).is(":checked").val())
              check_status1.set({field1: 'data1'});
            else
               check_status1.set({});
       },
       "change #checkbox2" : function(event) {
            if($(event.currentTarget).is(":checked").val())
              check_status2.set({field2: 'data2'});
            else
               check_status2.set({});
       },
       "change #checkbox3" :function(event) {
            if($(event.currentTarget).is(":checked").val())
               check_status3.set({field3: 'data2'});
            else
               check_status3.set({});
       },
 });

Explanation:

When we initialize the reactive var check_status we set the value equal to {}. In the helper, at the time of rendering, the same data is passed to the query Collection.find(check_status.get()) which is as good as show all data.

As soon as you click on the checkbox, the event described in the Template.main.events is triggered which sets the value of check_status to {field: data}. Since, this is a reactive var, the showData template is re run and this time the query is Collection.find({field: data}), so only fields, where field matched 'data' is returned.

You will need to add the reactive var package(meteor add reactive-var) before using these commands.

Alternatively, you can also use Tracker.autorun is you want to continue using session variables.

Upvotes: 1

Related Questions