Question

我在HTML表单中有多个复选框。当我单击一个按钮时，选中的值将被放入JavaScript对象并触发过滤器功能。

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

在过滤器功能中，我正在拉一个json文件。

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

现在我想显示与表单中的值匹配的对象。这就是我的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

而是在对象中推送值，为什么不尝试使用jQuery的'serialize'对象属性。

尝试将所有表单数据存储在单个字符串中，然后使用filer和某些方法匹配值。

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

Javascript用于过滤json数组的对象

2 个答案: