如何根据相同对象内部给定的键值过滤对象 [英] How to filter objects based on value of key given inside same object

问题描述

我有一些对象列表，我必须根据存在于同一对象中的键的值来过滤对象，并创建包含内容的< div> 标签.

I have list of objects where I have to filter the objects based on value of a key present inside same object and create <div> tag with content.

对象列表:

{
    "statusCode" : 200,
    "statusMessage" : "OK",
    "result" : [
    {
            "owner" : {
                "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
            },
            "name" : "Test 12345",
            "description" : "Test 12345",
            "created_at" : 1465222538,
            "active" : "true",
            "id" : "2ade9236-c382-400c-9c0b-94e96db9b2aa",
            "status" : "OPEN"
        }, {
            "owner" : {
                "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
            },
            "name" : "sample2",
            "description" : "sample2",
            "created_at" : 1465117865,
            "active" : "true",
            "id" : "8bf206f9-d3e0-43f4-ba3f-f71c88db9b0e",
            "status" : "IN PROGRESS"
        }, 
    ]
}

我想根据"status":进行中" 或"status":"OPEN" 过滤数据，并在<li> 标记，但标识符(键)是存在于同一对象中的.如何在angularjs或香草javascript中实现此目标?

I want to filter data based on "status" : "IN PROGRESS" or "status" : "OPEN" and show the data inside <li> tag but the thing is identifier(key) is present inside the same object. How do I achieve this in angularjs or vanilla javascript?

目前，我正在循环使用ng-repeat在< li> 中创建和显示数据:

For now I am looping using ng-repeat to create and show data in <li>:

<div>
    <ul>
        <li ng-repeat="wd in currentPageWorkOrders>
            <a ng-click="viewProject(wd)"  href="">
                <h4>{{wd.name}}</h4>
            </a>
            <p>Publisher Name</p>
        </li>
    </ul>
</div>

推荐答案

您可以通过更短的角度使用Angular过滤器.例如您可以过滤ng-repeat.

You can use filters by Angular in a shorter way. e.g. You can filter in the ng-repeat.

因此，您的ng-repeat将是这样的:

So, your ng-repeat will be something like this:

<li ng-repeat="wd in elements | filter:search">
  <a ng-click=" viewProject(wd) " href=" ">
    <h4>{{wd.name}}</h4
  </a>
  <p>Status: {{wd.status}}</p>
</li>

在其中搜索是一个新元素的地方，您可以在其中设置fiters元素.就我而言，我使用:

Where the search is a new element where you set the fiters elements. In my case I use:

<span class="btn btn-default" ng-click="search.status=''">No Filters</span>
<span class="btn btn-primary" ng-click="search.status='OPEN'">Show Open</span>
<span class="btn btn-success" ng-click="search.status='IN PROGRESS'">Show In Progress</span>

您可以在Plunkr中检查其工作方式: https://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG?p =预览

You can check how it works, in the Plunkr: https://plnkr.co/edit/5V3Rg0lggjnPVFu3srsG?p=preview

这篇关于如何根据相同对象内部给定的键值过滤对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！