javascript - 如何根据同一对象内给定的键值过滤对象

Question

我有一个对象列表，我必须根据同一对象内存在的键值过滤对象并创建 <div>带有内容的标签。

对象列表:

{
    "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" : "IN PROGRESS"过滤数据或"status" : "OPEN"并显示<li>里面的数据标签，但问题是标识符(键)存在于同一对象内。我如何在 angularjs 或 vanilla javascript 中实现这一点？

现在我正在使用 ng-repeat 循环创建和显示 <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>

Answer 1

您可以以更短的方式使用 Angular 的过滤器。 例如您可以在 ng-repeat 中进行过滤。

所以，你的 ng-repeat 将是这样的:

<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 元素。就我而言，我使用:

<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=preview