How to filter objects based on value of key given inside same object

Question

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.

List of objects:

{
    "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"
        }, 
    ]
}

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?

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>

Answer 1

You can use filter method to filter out the required data

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

})
console.log(filterArray)

See this jsfiddle

Answer 2

You can use ng-if to filter the items.codepen url for reference 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>

Hope this is helpful for you

Answer 3

You can use filters by Angular in a shorter way. eg You can filter in the 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>

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>

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