filter json with javascript object

Question

That's my situation: I´ve got an HTML form, which is sperated in 4 sections, where the user can select some checkboxes and a drop down list. When clicking on the button under this list, the selected elements will be thrown into an JS-Object.

Beneath that HTML form, I've got a result list, which is initially generated by a json file. When loading the page all objects in the json file are shown. Now the user can select some filters in the html form to filter this list.

Let me show you what I've got:

HTML form

<form class="filterThisResults">
<ul class="filter-list">
    <button type="reset">delete filters</button>
    <div class="search-filter-section">
        <li>
            <h2>Bereich</h2>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="Hochschule">
            <label for="check1">Hochschule</label>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
            <label for="check2">Angewandte Ingenierwissenschaften</label>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="Bauen & Gestalten">
            <label for="check3">Bauen & Gestalten</label>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="BWL">
            <label for="check4">BWL</label>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="Informatik">
            <label for="check5">Informatik</label>
        </li>
        <li>
            <input class="filterCheckbx" id="section" type="checkbox" name="section" value="Logistik">
            <label for="check6">Logistik</label>
        </li>
    </div>
    <div class="search-filter-group">
        <li>
            <h2>Gruppen</h2>
        </li>
        <li>
            <input class="filterCheckbx" id="group" type="checkbox" name="group" value="Professoren">
            <label for="check1">Professoren</label>
        </li>
        <li>
            <input class="filterCheckbx" id="group" type="checkbox" name="group" value="Studenten">
            <label for="check2">Studenten</label>
        </li>
        <li>
            <input class="filterCheckbx" id="group" type="checkbox" name="group" value="Angestellte">
            <label for="check3">Angestellte</label>
        </li>
    </div>
    <div class="search-filter-location">
        <li>
            <h2>Standort</h2>
        </li>
        <li>
            <input class="filterCheckbx" id="location" type="checkbox" name="location" value="Kaiserslautern">
            <label for="check1">Kaiserslautern</label>
        </li>
        <li>
            <input class="filterCheckbx" id="location" type="checkbox" name="location" value="Primasens">
            <label for="check2">Primasens</label>
        </li>
        <li>
            <input class="filterCheckbx" id="location" type="checkbox" name="location" value="Zweibrücken">
            <label for="check3">Zweibrücken</label>
        </li>
    </div>

    <div class="search-filter-topic">
        <li>
            <h2>Thema</h2>
        </li>           
        <li>    
            <select class="filterCheckbx" id="topic" name="topic" size="3">
                <option value="Lorem">Lorem</option>
                <option value="Ipsum">Ipsum</option>
                <option value="Dolor">Dolor</option>
            </select>   
        </li>
    </div>

    <li>
        <button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
    <li>
</ul>   

JSON data

{
"searchtest" : [
  {
    "section": "Hochschule",
    "group": "Professoren",
    "location": "Kaiserslautern",
    "date": "HS 2015/11",
    "description" : "Lorem ipsum dolor sit amet",
    "details" : "VZ",
    "deadline" : "27.12.2015",
    "topic" : "Lorem"
  },

  {
    "section": "Angewandte Ingenierwissenschaften",
    "group": "Studenten",
    "location": "Kaiserslautern",
    "date": "HS 2016/11",
    "description" : "Consetetur sadipscing elitr",
    "details" : "TZ",
    "deadline" : "01.01.2016",
    "topic" : "Ipsum"
  },

(...)

]}

Push selected elements into an object

this.filterChkbx.on('click', function() {
    checkedBox.push({
        key: this.id,
        value: this.value
    });
    console.log('Selected filter: ', checkedBox);
});
this.submitFilter.on('click', function () {
    _this.filterList(checkedBox);
})

This works for me until here. Clicking on this.filterChkbx pushes the id and the value of the checked item to the object checkedBox. This works - I can log the selected elements of the html formular. Now I want to filter my result list. Here this.myObject references on the json array "searchtest". And thats where I am confused:

I iterate the json objects, and check if the key (of the filter object) matches el.section (which is the json object). When true, I have to check if the value of this key, is the same, as in that json object. And if that is true, show the item in the result.

filterList : function(filterArr){
    var _this = this;       
    var result = [];

    for(var i=0, i < this.myObject.length, i++) {           
        var el = this.myObject[i];

        if (filterArr[i].key === el.section){

        }
        if (filterArr[i].key === el.group){

        }
        if (filterArr[i].key === el.location){

        }
        if (filterArr[i].key === el.topic){

        }
     }
}

I´d like to achieve this with pure JS/jQuery. I hope you guys got what I want to achieve.

Kind regards, David

Answer 1

I made my own solution, I'd like to share with you:

filterList : function(filterObj){


var _this = this;
    var result = [];

    for (var i = 0; i < _this.myObject.length; i++) {           
        var el = this.myObject[i];

        for (var j = 0; j < filterObj.length; j++){
            if (filterObj[j].filterEl == el.section){
                console.log('Filter section triggered on ', el.section);
            } else if (filterObj[j].filterEl == el.group){
                console.log('Filter group triggered on ', el.group);
            } else if (filterObj[j].filterEl == el.location){
                console.log('Filter location triggered on ', el.location);
            } else if (filterObj[j].filterEl == el.topic){
                console.log('Filter topic triggered on ', el.topic);
            };
            }   
        };      
     }

This does the comparsion, now just append the elements.

Answer 2

If I understood your problem well, your filter function might look like this:

filterList : function(filterArr){
var _this = this;       
var result = [];

for(var i=0, i < this.myObject.length, i++) {           
    var el = this.myObject[i];

    if (filterArr[i].key === 'section'){

    }
    if (filterArr[i].key === 'group'){

    }
    if (filterArr[i].key === 'location'){

    }
    if (filterArr[i].key === 'topic'){

    }
  }
}

Since key seems to be initialized with your object's property's name, then it is a string which value is the litteral property's name (ie: topic, deadline and so on).

el.section will actually give you the object's section's value but not the name of the property.