Angular filter not showing objects with null properties

Question

I have an array of operators like this:

[  
   {  
      "id":1,
      "key":"55330",
      "name":"Macie",
      "operative_status":{  
         "id":20,
         "code":"100",
         "name_status":"viaje",
         "created_at":"2016-08-03T21:28:52Z"
      }
   },
   {  
      "id":2,
      "key":"8439",
      "name":"Darian",
      "operative_status":null
   },
   {  
      "id":3,
      "key":"49531",
      "name":"Kaelyn",
      "operative_status":null
   }
]

And I want to display them using an ng-repeat:

<div ng-repeat="operator in operators | filter:{ operative_status : {name_status: status}}">

As you can see, I want to filter by status.

The problem is that it doesn't show the operators that have the operative_status with null.

What is name_status?

developer033
– developer033

2016-08-04 00:21:50 +00:00
Commented Aug 4, 2016 at 0:21 — developer033
– developer033, Commented Aug 4, 2016 at 0:21
a property of operative_status

Kimy BF
– Kimy BF

2016-08-04 00:50:21 +00:00
Commented Aug 4, 2016 at 0:50 — Kimy BF
– Kimy BF, Commented Aug 4, 2016 at 0:50

developer033 · Accepted Answer · 2016-08-04 01:18:19Z

To filter null values you have to do something like this:

<div ng-repeat="operator in operators | filter: { operative_status : search && {name_status: search } || '!'}">

or

<div ng-repeat="operator in operators | filter: { operative_status : search ? {name_status: search } : '!'}">

Here's working example:

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.operators = [  
       {  
          "id":1,
          "key":"55330",
          "name":"Macie",
          "operative_status":{  
             "id":20,
             "code":"100",
             "name_status":"viaje",
             "created_at":"2016-08-03T21:28:52Z"
          }
       },
       {  
          "id":2,
          "key":"8439",
          "name":"Darian",
          "operative_status":null
       },
       {  
          "id":3,
          "key":"49531",
          "name":"Kaelyn",
          "operative_status":null
       }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <input type="text" class="form-control" ng-model="search" placeholder="Search...">
  <hr>
  <div ng-repeat="operator in operators | filter: { operative_status : search && {name_status: search } || '!'}">
    <pre ng-bind="operator | json"></pre>
  </div>

</body>

</html>

miqh · Accepted Answer · 2016-08-03 23:47:45Z

1

For your data, using a pattern object as the filter expression won't work because the items that have a value of null for the operative_status property will never be matched, which is what you're observing.

You could use a predicate function instead for the filter expression.

For example:

$scope.filterByStatus = function (value) { if ($scope.status.length === 0) return true; return value.operative_status && value.operative_status.name_status === $scope.status; };

And then using it in your filter expression:

operator in operators | filter:filterByStatus

Demonstration Plunker

answered Aug 3, 2016 at 23:47

miqh

3,6642 gold badges31 silver badges38 bronze badges

1 Comment

Kimy BF Over a year ago

Thank you, this works if I change this line if ($scope.status.length === 0) return true; to this if ($scope.status === undefined).

Collectives™ on Stack Overflow

Angular filter not showing objects with null properties

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related