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>

score 1 · Answer 1 · answered Jun 06 '16 at 15:44

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

answered Jun 06 '16 at 15:44

brk

48,835
10
56
78

How is resultant object different from object I am passing? Its printing the same object out. I want to create `
based on `status` key

kittu

Jun 06 '16 at 15:49

So if the `status == open` I will create a `

object data

` and if the `status==In progress' then another `

object data

` – kittu Jun 06 '16 at 15:51

score 1 · Answer 2 · answered Jun 06 '16 at 16:17

1

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

answered Jun 06 '16 at 16:17

Naga Sai A

10,771
1
21
40

Hi, I have list of button on the sidebar called ``, `` etc. I want to display the above results only when I click on the respective buttons – kittu Jun 06 '16 at 16:21
Check the updated codepen URL -http://codepen.io/nagasai/pen/MeaawO .Hope this works for you :) – Naga Sai A Jun 06 '16 at 16:30

joseglego · Accepted Answer · 2016-06-06T16:31:45.420

1

You can use filters by Angular in a shorter way. e.g. 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

edited Jun 06 '16 at 16:31

answered Jun 06 '16 at 16:24

joseglego

2,011
1
17
28

Thank you Jose. How do I provide pagination lets say I want to show only 10 objects on ng-click? – kittu Jun 06 '16 at 19:03
In that case you will need a second list. With only the filtered elements, and make few maths operations: Have a page, number of pages. You can check this other question: http://stackoverflow.com/questions/11581209/pagination-on-a-list-using-ng-repeat check the Fiddle. It works so good! And use: `
`

joseglego

Jun 06 '16 at 21:29

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

3 Answers3

Linked