Это моя ситуация: У меня есть HTML-форма, которая состоит из 4 разделов, где пользователь может выбрать некоторые флажки и выпадающий список. При нажатии на кнопку в этом списке выбранные элементы будут помещены в JS-Object.фильтр json с объектом javascript
Под этой формой HTML у меня есть список результатов, который изначально генерируется json-файлом. При загрузке страницы отображаются все объекты в json-файле. Теперь пользователь может выбрать некоторые фильтры в форме html для фильтрации этого списка.
Позвольте мне показать вам, что у меня есть:
HTML формы
<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 данные
{
"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"
},
(...)
]}
Нажмите выбранные элементы в объект
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.filterChkbx подталкивает идентификатор и значение отмеченного элемента к объекту checkedBox. Это работает - я могу зарегистрировать выбранные элементы html formular. Теперь я хочу отфильтровать список результатов. Здесь this.myObject ссылается на json-массив «searchtest». И вот где я смущен:
Я повторяю объекты json и проверяю, соответствует ли ключ (объекта фильтра) элементу el.section (который является объектом json). Когда true, я должен проверить, совпадает ли значение этого ключа, как в этом объекте json. И если это так, покажите элемент в результате.
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){
}
}
}
Я хотел бы достичь этого с помощью чистого JS/jQuery. Надеюсь, вы, ребята, получили то, чего я хочу достичь.
С наилучшими пожеланиями, Дэвид