Javascript用于过滤json数组的对象

Question

I've got multiple checkboxes in an HTML form. When I click on a button, the checked values are put into an JavaScript object and a filter function is triggered.

this.filterChkbx.on('click', function() {
    _this.checkedFilter.push({
        filterEl: this.value
    });
});

In the filter function I'm pulling a json file.

$.ajax("ajax/search-test-data.json")
.done(function (data){
    ...

Now I want to show the objects matching the values from the form. That´s what my json looks like:

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

  {
    "id" : "002",

And this is my form:

<form class="filterThisResults" action="ajax/search-test-data.json" method="GET">

    <ul class="filter-list">
        <button type="reset">Filter löschen</button>

        <div class="search-filter-section">
            <li>
                <h2>Bereich</h2>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Hochschule">
                <label for="check1">Hochschule</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
                <label for="check2">Angewandte Ingenierwissenschaften</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Bauen & Gestalten">
                <label for="check3">Bauen & Gestalten</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="BWL">
                <label for="check4">BWL</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Informatik">
                <label for="check5">Informatik</label>
            </li>

            <li>
                <input class="filterCheckbx" 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" type="checkbox" name="group" value="Professoren">
                <label for="check1">Professoren</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="group" value="Studenten">
                <label for="check2">Studenten</label>
            </li>

            <li>
                <input class="filterCheckbx" 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" type="checkbox" name="location" value="Kaiserslautern">
                <label for="check1">Kaiserslautern</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="location" value="Pirmasens">
                <label for="check2">Pirmasens</label>
            </li>

            <li>
                <input class="filterCheckbx" 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>   
</form>

What´s the way to go through the json and check which items are true. When more than one item in a form-section is selected, the results are enlarged.

Answer 1

Array.prototype.filter() : creates a new array with all elements that pass the test implemented by the provided function

Array.prototype.some() : tests whether some element in the array passes the test implemented by the provided function

.done(function(data) {
    var elementsFoundInData = data.searchtest.filter(function(test) {
        return checkedFilter.some(function(flt) {
            return test.section === flt.filterEL;
        });
    });

    // show found elements...
})

This is more like pseudo code as you probably would have to adjust the variables ( checkFilter , data ) a little bit depending on their scopes/types.

Answer 2

Instead push values in object, why should you not try with 'serialize' object property of jQuery.

Try this to store all form data in single string and then use filer and some method to match the values.

function showValues() {
    var str = $( "form" ).serialize();
    console.log(str);
  }
$('[type=reset]').on("click",function(e){
 showValues();
  event.preventDefault();
})