jQuery filter json based on multiple select boxes

Question

I'm trying to filter from json data using user selected values from multiple select boxes. select boxes are

 var data = [ {'BranchID': 1, 'City': "CA", 'State': "Culver City", 'VenueName': "Test Venue1", 'Address': "Address1"}, {'BranchID': 2, 'City': "MD", 'State': "San Antonio", 'VenueName': "Test Venue2", 'Address': "Address2"}, {'BranchID': 1, 'City': "CA", 'State': "Culver City", 'VenueName': "Test Venue3", 'Address': "Address3"}, {'BranchID': 3, 'City': "TX", 'State': "St. Louis", 'VenueName': "Test Venue4", 'Address': "Address4"} ]; //var values = JSON.parse(jQuery('#Data').text()); var values = data; $("select").on("change", function () { var showAll = true, show = [], joined; $.each(values, function (id, index) { var $el = $('#filter' + id), val = $el.val(); if (val != null) { showAll = false; $.each(val, function (i, v) { show.push( v ); }); } }); console.log(showAll); console.log(show); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <select id="filter1"> <option selected="" disabled="">State</option> <option value="CA">CA</option> <option value="MD">MD</option> <option value="WA">WA</option> <option value="TX">TX</option> </select> <select class="filter2"> <option selected="" disabled="" value="">City</option> <option value="Culver City">Culver City</option> <option value="Aberdeen Proving Ground">Aberdeen Proving Ground</option> <option value="Kent">Kent</option> <option value="San Antonio">San Antonio</option> <option value="St. Louis">St. Louis</option> </select> <select id="filter3"> <option selected="" disabled="">Venue Name</option> <option value="Test Venue1">Test Venue1</option> <option value="Test Venue2">Test Venue2</option> <option value="Test Venue3">Test Venue3</option> <option value="Test Venue4">Test Venue4</option> <option value="Test Venue5">Test Venue5</option> </select> 

How can i filter for NULL select values and actual selected values without writing tons of if statements.

Answer 1

Use plain Javascript here. .onchange() and .filter() suffice. But you won't be able to avoid the minimum amount of if-statements to filter correctly.

HTML

<select id="filter1" onchange="changeListener(this)">...</select>
<select id="filter2" onchange="changeListener(this)">...</select>
<select id="filter3" onchange="changeListener(this)">...</select>

JavaScript

function changeListener() {

    var filter1 = document.getElementById("filter1").value;
    var filter2 = document.getElementById("filter2").value;
    var filter3 = document.getElementById("filter3").value;

    var result = [];

    if(filter1 != null) {
        result = data.filter(el => el.City === filter1);
    }

    if(filter2 != null) {
        filterMatches(filter2, 'State');         
    }

    if(filter3 != null) {
        filterMatches(filter3, 'VenueName');         
    }

    console.log('result: ', result);

}

function filterMatches(criteria, field) {
    let tempResult = [];

    if(result.length > 0){
        result.forEach(el => {
            if(el.[field] === criteria){
                    tempResult.push(el);
                }
            });

            result = tempResult;
        } else {
            result = data.filter(el => el.[field] === criteria);
        }
    }
}