用javascript對象過濾json

Question

這就是我的情況：我有一個HTML表單，該表單分為4個部分，用戶可以在其中選擇一些復選框和一個下拉列表。 單擊此列表下的按鈕時，所選元素將被扔到JS對象中。

在該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將選中項目的ID和值推送到對象checkbox。 這有效-我可以記錄html公式的選定元素。 現在，我要過濾我的結果列表。 這里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實現此目的。 我希望你們得到了我想要實現的目標。

親切的問候，大衛

Answer 1

我制定了自己的解決方案，並與您分享：

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);
            };
            }   
        };      
     }

進行比較，現在僅添加元素。

Answer 2

如果我很了解您的問題，則您的過濾器功能可能如下所示：

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'){

    }
  }
}

由於key似乎是用您對象的屬性名稱初始化的，因此它是一個字符串，其值是垃圾屬性的名稱（即主題，截止日期等）。

實際上， el.section會為您提供對象的section的值，而不是屬性的名稱。