Question

这是我的情况：我有一个HTML表单，分为4个部分，用户可以选择一些复选框和下拉列表。单击此列表下的按钮时，所选元素将被抛入JS-Object。

在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和值推送到对象checkedBox。这工作 - 我可以记录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似乎是使用您对象的属性名称初始化的，因此它是一个字符串，其值是litteral属性的名称（即：主题，截止日期和等等。）

el.section实际上会为您提供对象的部分值，但不会提供该属性的名称。

用javascript对象过滤json

2 个答案: