使用 javascript 对象过滤 json

Posted 2023-04-13

【中文标题】使用 javascript 对象过滤 json

【英文标题】：filter json with javascript object

【发布时间】：2016-02-21 15:37:51

【问题描述】：

这就是我的情况： 我有一个 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 对象）。如果为真，我必须检查该键的值是否与该 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 来实现这一点。 我希望你们能得到我想要实现的目标。

亲切的问候，大卫

【参考方案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);
            ;
               
        ;      
     

这会进行比较，现在只需附加元素。

【参考方案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 实际上会给你对象的部分的值，而不是属性的名称。