Filtering Object based on user input using JQuery

Question

I have a data Object and based on the records I am generating a table. In that table, I am giving some options to the users to filer it out like below.

I have used the $.grep to filter the items. If you look at my code I have used the $.grep for each and every element and finally displaying the table. Look at the below code.

 var dataArray = {
"rooms": [
{"name":"1001","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":false},
{"name":"1002","type":"Family","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1003","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
{"name":"1004","type":"Double","status":"Occupied","ac":false,"tv":false,"ref":true},
{"name":"1005","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1006","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1007","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
{"name":"1008","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
{"name":"1009","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1010","type":"Double","status":"Occupied","ac":false,"tv":true,"ref":false},
{"name":"1011","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
{"name":"1012","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1013","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1014","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1015","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":true},
{"name":"1016","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":false},
{"name":"1017","type":"Double","status":"Available","ac":true,"tv":false,"ref":false},
{"name":"1018","type":"Single","status":"Available","ac":true,"tv":false,"ref":true}
]}

$("#roomTypeSelect").on('change', function(){updateTableView()});
    $('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e){updateTableView(e);});
    function updateTableView(e) {
    console.log('called');
roomType = $('#roomTypeSelect option:selected').text();
        checkAvailable = $('#checkAvailable').prop('checked');
        checkAC = $('#checkAC').prop('checked');
        checkTV = $('#checkTV').prop('checked');
        checkRef = $('#checkRef').prop('checked');
        var lists = dataArray.rooms;

        if(roomType != 'Room Type') {
            lists = $.grep(lists, function (item) {
                return item.type == roomType;
            });
        }
        if(checkAvailable) {
            lists = $.grep(lists, function (item) {
                return item.status == 'Available';
            });
        }

        if(checkAC) {
            lists = $.grep(lists, function (item) {
                return item.ac == checkAC;
            });
        }
        if(checkTV) {
            lists = $.grep(lists, function (item) {
                return item.tv == checkTV;
            });
        }
        if(checkRef) {
            lists = $.grep(lists, function (item) {
                return item.ref == checkRef;
            });
        }

        var items = lists.map(function (item) {
            var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            return '<tr><td>'+item.name+'</td><td class="'+item.status+'">'+item.status+'</td><td>'+item.type+'</td><td>'+ac+'</td><td>'+tv+'</td><td>'+ref+'</td></tr>';
        });
  console.log("ITEMS",items);
        $('table.results tbody').html(items);
    }

Code Snippet

 var dataArray = { "rooms": [ {"name":"1001","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":false}, {"name":"1002","type":"Family","status":"Occupied","ac":true,"tv":true,"ref":true}, {"name":"1003","type":"Double","status":"Available","ac":true,"tv":true,"ref":false}, {"name":"1004","type":"Double","status":"Occupied","ac":false,"tv":false,"ref":true}, {"name":"1005","type":"Single","status":"Available","ac":false,"tv":false,"ref":false}, {"name":"1006","type":"Family","status":"Available","ac":false,"tv":false,"ref":false}, {"name":"1007","type":"Family","status":"Available","ac":false,"tv":false,"ref":true}, {"name":"1008","type":"Family","status":"Available","ac":false,"tv":false,"ref":true}, {"name":"1009","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true}, {"name":"1010","type":"Double","status":"Occupied","ac":false,"tv":true,"ref":false}, {"name":"1011","type":"Double","status":"Available","ac":true,"tv":true,"ref":false}, {"name":"1012","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true}, {"name":"1013","type":"Family","status":"Available","ac":false,"tv":false,"ref":false}, {"name":"1014","type":"Single","status":"Available","ac":false,"tv":false,"ref":false}, {"name":"1015","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":true}, {"name":"1016","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":false}, {"name":"1017","type":"Double","status":"Available","ac":true,"tv":false,"ref":false}, {"name":"1018","type":"Single","status":"Available","ac":true,"tv":false,"ref":true} ] } $("#roomTypeSelect").on('change', function(){updateTableView()}); $('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e){updateTableView(e);}); function updateTableView(e) { roomType = $('#roomTypeSelect option:selected').text(); checkAvailable = $('#checkAvailable').prop('checked'); checkAC = $('#checkAC').prop('checked'); checkTV = $('#checkTV').prop('checked'); checkRef = $('#checkRef').prop('checked'); var lists = dataArray.rooms; if(roomType != 'Room Type') { lists = $.grep(lists, function (item) { return item.type == roomType; }); } if(checkAvailable) { lists = $.grep(lists, function (item) { return item.status == 'Available'; }); } if(checkAC) { lists = $.grep(lists, function (item) { return item.ac == checkAC; }); } if(checkTV) { lists = $.grep(lists, function (item) { return item.tv == checkTV; }); } if(checkRef) { lists = $.grep(lists, function (item) { return item.ref == checkRef; }); } var items = lists.map(function (item) { var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; return '<tr><td>'+item.name+'</td><td class="'+item.status+'">'+item.status+'</td><td>'+item.type+'</td><td>'+ac+'</td><td>'+tv+'</td><td>'+ref+'</td></tr>'; }); $('table.results tbody').html(items); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;"> <div class="form-group"> <select class="form-control" id="roomTypeSelect"> <option>Room Type</option> <option>Single</option> <option>Double</option> <option>Family</option> </select> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAvailable"> <label class="form-check-label" for="checkAvailable">Available</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAC"> <label class="form-check-label" for="checkAC">AC</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkTV"> <label class="form-check-label" for="checkTV">TV</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkRef"> <label class="form-check-label" for="checkRef">Refridgerator</label> </div> </div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem"> <table class="table results"> <thead> <tr> <th scope="col">Room#</th> <th scope="col">Status</th> <th scope="col">Type</th> <th scope="col">AC</th> <th scope="col">TV</th> <th scope="col">Refridgerator</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> 

QUESTION: I feel that I have achieved the results using too many $.grep methods. Is there any simple way to do achieve this functionality?

Answer 1

Yes, you could do all the comparisons inside the $.grep .

I've also refactored for using a naming convention for the checkboxes.

 var dataArray = { "rooms": [{ "name": "1001", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": false }, { "name": "1002", "type": "Family", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1003", "type": "Double", "status": "Available", "ac": true, "tv": true, "ref": false }, { "name": "1004", "type": "Double", "status": "Occupied", "ac": false, "tv": false, "ref": true }, { "name": "1005", "type": "Single", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1006", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1007", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": true }, { "name": "1008", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": true }, { "name": "1009", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1010", "type": "Double", "status": "Occupied", "ac": false, "tv": true, "ref": false }, { "name": "1011", "type": "Double", "status": "Available", "ac": true, "tv": true, "ref": false }, { "name": "1012", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1013", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1014", "type": "Single", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1015", "type": "Family", "status": "Occupied", "ac": false, "tv": false, "ref": true }, { "name": "1016", "type": "Family", "status": "Occupied", "ac": false, "tv": false, "ref": false }, { "name": "1017", "type": "Double", "status": "Available", "ac": true, "tv": false, "ref": false }, { "name": "1018", "type": "Single", "status": "Available", "ac": true, "tv": false, "ref": true } ] } $("#roomTypeSelect").on('change', function() { updateTableView() }); $('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e) { updateTableView(e); }); function updateTableView(e) { roomType = $('#roomTypeSelect option:selected').text(); var checkAvailable = $('#checkAvailable').prop('checked'); var checks = { ac: $('#checkAC').prop('checked'), tv: $('#checkTV').prop('checked'), ref: $('#checkRef').prop('checked') }; var lists = $.grep(dataArray.rooms, function(item) { var filter = true; if (roomType != 'Room Type') filter &= item.type == roomType; if (checkAvailable) filter &= item.status == 'Available'; for (var prop in checks) { if (checks[prop]) filter &= item[prop] == checks[prop] } return filter; }); var items = lists.map(function(item) { var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; return '<tr><td>' + item.name + '</td><td class="' + item.status + '">' + item.status + '</td><td>' + item.type + '</td><td>' + ac + '</td><td>' + tv + '</td><td>' + ref + '</td></tr>'; }); $('table.results tbody').html(items); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;"> <div class="form-group"> <select class="form-control" id="roomTypeSelect"> <option>Room Type</option> <option>Single</option> <option>Double</option> <option>Family</option> </select> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAvailable"> <label class="form-check-label" for="checkAvailable">Available</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAC"> <label class="form-check-label" for="checkAC">AC</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkTV"> <label class="form-check-label" for="checkTV">TV</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkRef"> <label class="form-check-label" for="checkRef">Refridgerator</label> </div> </div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem"> <table class="table results"> <thead> <tr> <th scope="col">Room#</th> <th scope="col">Status</th> <th scope="col">Type</th> <th scope="col">AC</th> <th scope="col">TV</th> <th scope="col">Refridgerator</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> 

Answer 2

you can try this, by changing it to a single grep statement like

    $.grep(lists, function(item) {
      return (roomType != 'Room Type' ? item.type == roomType : true) && (checkAvailable ? item.status == 'Available' : true) && (checkAC ? item.ac == checkAC : true) && (checkTV ?item.tv == checkTV : true) && (checkRef ? item.ref == checkRef : true)
    });

 var dataArray = { "rooms": [{ "name": "1001", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": false }, { "name": "1002", "type": "Family", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1003", "type": "Double", "status": "Available", "ac": true, "tv": true, "ref": false }, { "name": "1004", "type": "Double", "status": "Occupied", "ac": false, "tv": false, "ref": true }, { "name": "1005", "type": "Single", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1006", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1007", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": true }, { "name": "1008", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": true }, { "name": "1009", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1010", "type": "Double", "status": "Occupied", "ac": false, "tv": true, "ref": false }, { "name": "1011", "type": "Double", "status": "Available", "ac": true, "tv": true, "ref": false }, { "name": "1012", "type": "Single", "status": "Occupied", "ac": true, "tv": true, "ref": true }, { "name": "1013", "type": "Family", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1014", "type": "Single", "status": "Available", "ac": false, "tv": false, "ref": false }, { "name": "1015", "type": "Family", "status": "Occupied", "ac": false, "tv": false, "ref": true }, { "name": "1016", "type": "Family", "status": "Occupied", "ac": false, "tv": false, "ref": false }, { "name": "1017", "type": "Double", "status": "Available", "ac": true, "tv": false, "ref": false }, { "name": "1018", "type": "Single", "status": "Available", "ac": true, "tv": false, "ref": true } ] } $("#roomTypeSelect").on('change', function() { updateTableView() }); $('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e) { updateTableView(e); }); function updateTableView(e) { roomType = $('#roomTypeSelect option:selected').text(); checkAvailable = $('#checkAvailable').prop('checked'); checkAC = $('#checkAC').prop('checked'); checkTV = $('#checkTV').prop('checked'); checkRef = $('#checkRef').prop('checked'); var lists = dataArray.rooms; lists = $.grep(lists, function(item) { return (roomType != 'Room Type' ? item.type == roomType : true) && (checkAvailable ? item.status == 'Available' : true) && (checkAC ? item.ac == checkAC : true) && (checkTV ? item.tv == checkTV : true) && (checkRef ? item.ref == checkRef : true) }); var items = lists.map(function(item) { var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>"; return '<tr><td>' + item.name + '</td><td class="' + item.status + '">' + item.status + '</td><td>' + item.type + '</td><td>' + ac + '</td><td>' + tv + '</td><td>' + ref + '</td></tr>'; }); $('table.results tbody').html(items); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;"> <div class="form-group"> <select class="form-control" id="roomTypeSelect"> <option>Room Type</option> <option>Single</option> <option>Double</option> <option>Family</option> </select> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAvailable"> <label class="form-check-label" for="checkAvailable">Available</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkAC"> <label class="form-check-label" for="checkAC">AC</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkTV"> <label class="form-check-label" for="checkTV">TV</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkRef"> <label class="form-check-label" for="checkRef">Refridgerator</label> </div> </div> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem"> <table class="table results"> <thead> <tr> <th scope="col">Room#</th> <th scope="col">Status</th> <th scope="col">Type</th> <th scope="col">AC</th> <th scope="col">TV</th> <th scope="col">Refridgerator</th> </tr> </thead> <tbody> </tbody> </table> </div> </div>