使用JavaScript對象過濾器json

這就是我的情況：我有一個HTML表單，它分爲4個部分，用戶可以選擇一些複選框和一個下拉列表。當點擊此列表下的按鈕時，所選元素將被拋入JS對象中。使用JavaScript對象過濾器json

在該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實現此目的。我希望你們有我想達到的。

親切的問候，大衛

來源

2015-11-19 David Nnamremmiz

我做我自己的解決方案，我想與大家分享：

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

這確實之比較，現在只是追加的元素。

來源

2015-11-19 15:31:24

如果我明白你的問題很好，你的過濾功能可能是這樣的：

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實際上給你對象的部分的價值而不是屬性的名稱。

來源

2015-11-19 15:31:45

使用JavaScript對象過濾器json

回答

相關問題