Javascript Объект фильтра json Array

Question

У меня есть несколько флажков в форме HTML. Когда я нажимаю кнопку, проверенные значения помещаются в объект JavaScript и запускается функция фильтра.

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

В функции фильтра я вытаскиваю json-файл.

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

Теперь я хочу показать объекты, соответствующие значениям из формы. That's, что моя JSON выглядит следующим образом:

{ 
"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", 

И это моя форма:

<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> 

как там путь через JSON и проверить, какие элементы являются истинными. Если выбрано более одного элемента в форме, результаты будут увеличены.

Answer 1

Array.prototype.filter(): создает новый массив со всеми элементами, которые проходят тест, реализованный при условии функции

Array.prototype.some(): испытаний проходит ли какой-то элемент в массиве тест, реализованный при условии функции

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

    // show found elements... 
}) 

Это больше похоже на псевдокод, поскольку вам, вероятно, придется корректировать переменные (checkFilter , data) немного в зависимости от их областей/типов.

Answer 2

Вместо значения push в объекте, почему вы не должны пытаться использовать свойство «serialize» объекта jQuery.

Попробуйте это, чтобы сохранить все данные формы в одной строке, а затем использовать filer и некоторый метод для соответствия значениям.

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