Filtering out objects with empty property from ng-repeat array

Question

I have this array in scope:

$scope.randomArray = [
      {
        prop1: 'val1',
        prop2: {
          value: '3',
          unit: 'l'
        }
      },
      {
        prop1: 'val2'
      },
      {
        prop1: 'val3',
        prop2: {
          value: '10',
          unit: 'l'
        }
      }
    ];

Trying to make an ng-repeat through this only with objects having prop2 property set. I would not create a separate filter or scope function for this if not necessary, so I've tried this solution described here and here:

<div ng-repeat="random in randomArray | filter : { prop2 : '!!'}">
  {{random}}
  </div>

but it not works.

Here is the mcve: https://codepen.io/neptune01/pen/eWRBKd

All commenters, It doesnt work for angular V1.3 and above. OP's qn is valid — Jins Peter
– Jins Peter, Commented May 2, 2017 at 10:23

Jins Peter · Accepted Answer · 2017-05-02 10:39:41Z

4

A solution I come up with is this.Use ng-if for random.prop2. This works for prop2 being not null/undefined. Which is your case. For any other filtering you can use other methods

<div ng-app="app">
<div ng-controller="appCtrl">

  <div ng-repeat="random in randomArray" ng-if="random.prop2">
  {{random}}
  </div>

  </div>
</div>

edited May 2, 2017 at 10:39

answered May 2, 2017 at 10:33

Jins Peter

2,4891 gold badge22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadi · Accepted Answer · 2017-05-02 10:35:54Z

0

Try this.

var app = angular.module('app', [])
.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.randomArray = [
      {
        prop1: 'val1',
        prop2: {
          value: '3',
          unit: 'l'
        }
      },
      {
        prop1: 'val2'
      },
      {
        prop1: 'val3',
        prop2: {
          value: '10',
          unit: 'l'
        }
      }
    ];
  }]);
  app.filter('check', function() {
  return function(items, tagName) {
    var filtered = [];
    angular.forEach(items, function(el) {
      if(el['prop2'] != undefined) {
        filtered.push(el);
      }
    });
    return filtered;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="app">
<div ng-controller="appCtrl">
             
  <div ng-repeat="random in randomArray | check:'prop2'">
  {{random}}
  </div>
  
  </div>
</div>

answered May 2, 2017 at 10:35

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

4 Comments

Jins Peter Over a year ago

OP has said he does not need another custom filter for this.

Hadi Over a year ago

@JinsPeter OP not said he does not need another custom filter .. but he said if not necessary . read again please!

Jins Peter Over a year ago

It is not necessary. Easily achieved using an ng-if

Hadi Over a year ago

I think using of ng-if directive is costly.

Collectives™ on Stack Overflow

Filtering out objects with empty property from ng-repeat array

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related