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

Posted 2023-03-10

【中文标题】如何根据同一对象内给定的键值过滤对象

【英文标题】：How to filter objects based on value of key given inside same object

【发布时间】：2016-10-06 07:10:08

【问题描述】：

我有一个对象列表，我必须根据同一对象中存在的键的值过滤对象，并使用内容创建 <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>

【参考方案1】：

您可以使用filter方法过滤出需要的数据

var _getResult = myArray[0].result;
var filterArray = _getResult.filter(function(item)
 return item.status ==="OPEN" || item.status === "IN PROGRESS"

)
console.log(filterArray)

看到这个jsfiddle

【讨论】：

结果对象与我传​​递的对象有何不同？它打印出相同的对象。我想根据status 键创建<li>

所以如果status == open 我将创建一个<li>object data</li> 并且如果status==In progress' then another 对象数据`

嗨，一个简单的问题，函数内部的 item 参数来自哪里？我们就这样通过吗？我来自java背景

在将过滤器数组附加到范围后，而不是 currentPageWorkOrders 中的 wd 执行 wd.filterArray。 filterArray 将仅具有您需要的那些状态

item 只是 array.prototype.filter 接受的一个参数，而不是 item 你可以随意命名它

【参考方案2】：

您可以使用 ng-if 过滤 items.codepen url 以供参考 http://codepen.io/nagasai/pen/MeaawO

  <li ng-repeat="wd in currentPageWorkOrders.result" ng-if="wd.status == 'OPEN'">
                          <a ng-click="viewProject(wd)"  href="">
                              <h4  >wd</h4>

                          </a>

                      </li>

希望对你有帮助

【讨论】：

嗨，我在侧边栏上有一个名为<button>OPEN</button>、<button>IN PROGRESS</button> 等的按钮列表。我只想在单击相应按钮时显示上述结果

检查更新的 codepen URL -codepen.io/nagasai/pen/MeaawO。希望这对你有用:)

【参考方案3】：

您可以通过 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

【讨论】：

谢谢你，何塞。我如何提供分页假设我只想在 ng-click 上显示 10 个对象？

在这种情况下，您将需要第二个列表。仅使用过滤后的元素，并进行少量数学运算：有一页，页数。您可以检查另一个问题：***.com/questions/11581209/… 检查小提琴。效果很好！并使用：<li ng-repeat="item in filteredData | startFrom:currentPage*pageSize | limitTo:pageSize">