Test if an object is an empty object in a AngularJS template

Question

I have a simple object in a controller which can sometimes be empty ({}).

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};
});

I want to hide or show some DOM-elements in the corresponding template when the object is empty or not.

I tried to do it with a simple <div ng-if="vm.testObject"> but when vm.testObject === {} it is considered true in the ng-if.

<div ng-controller="TestController as vm">
  <div ng-if="vm.testObject">
    Test Object is not empty
  </div>
  <div ng-if="!vm.testObject">
    Test Object is empty
  </div>
</div>

Is there a simple way to check for an empty object in the template? Preferably without adding new variables to the scope.

Here is a working Plunker: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

How about a function, eg vm.isEmpty = function(obj) { return Object.keys(obj).length === 0; }. Then you can use ng-if="vm.isEmpty(vm.testObject)" — Phil
– Phil, Commented May 21, 2015 at 7:17

Numyx · Accepted Answer · 2015-05-21 07:29:35Z

43

You should use an AngularJs filter:

Javascript:

app.filter('isEmpty', [function() {
  return function(object) {
    return angular.equals({}, object);
  }
}])

Html template:

<div ng-if="!(vm.testObject | isEmpty)">
  Test Object is not empty
</div>
<div ng-if="vm.testObject | isEmpty">
  Test Object is empty
</div>

Updated plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

edited May 21, 2015 at 7:29

answered May 21, 2015 at 7:22

Numyx

1,7582 gold badges11 silver badges16 bronze badges

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

3 Comments

Numyx Over a year ago

You're right, thanks for helping me out there! Just corrected the answer.

Kevin Campion Over a year ago

For isNotEmpty return !angular.equals({}, object);

Victor Over a year ago

like this solution based on angular's framework instruments, i guess it is in a "canonical way" to archieve this goal

thekaveman · Accepted Answer · 2015-05-21 07:21:13Z

24

Are you ok with moving the equality check to the ng-if?

<div ng-controller="TestController as vm">
  <div ng-if="!equals({}, vm.testObject)">
    Test Object is not empty
  </div>
  <div ng-if="equals({}, vm.testObject)">
    Test Object is empty
  </div>
</div>

Otherwise, provide a helper on the scope

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};

  vm.empty = function() {
      return vm.testObject === {};
  };
});

then

<div ng-controller="TestController as vm">
  <div ng-if="!vm.empty()">
    Test Object is not empty
  </div>
  <div ng-if="vm.empty()">
    Test Object is empty
  </div>
</div>

answered May 21, 2015 at 7:21

thekaveman

4,42528 silver badges45 bronze badges

2 Comments

Lukasz Wiktor Over a year ago

Does this helper even work? In Javascript {} === {} gives false.

A. Matías Quezada Over a year ago

vm.empty = function(object) { return Object.keys(object).length === 0; };

L105 · Accepted Answer · 2018-12-10 14:27:18Z

1

This is an old thread but I find easier to check if the Object has keys.

<div ng-controller="TestController as vm">
  <div ng-if="Object.keys(vm.testObject).length">
    Test Object is not empty
  </div>
  <div ng-if="!Object.keys(vm.testObject).length">
    Test Object is empty
  </div>
</div>

It's simple and readable.

answered Dec 10, 2018 at 14:27

L105

5,4193 gold badges20 silver badges23 bronze badges

2 Comments

Akin Williams Over a year ago

Actually, this didn't work for me. Upvoted by mistake.

Victor Over a year ago

it doens't works for me. Using version 1.3.1 (yeah, i know that is older..)

Mohammad Fareed · Accepted Answer · 2017-06-15 12:00:11Z

0

This will work. check the Length

<div ng-if="!!vm.testObject && vm.testObject.length > 0">
  Test Object is not empty
</div>

answered Jun 15, 2017 at 12:00

Mohammad Fareed

1,9746 gold badges31 silver badges61 bronze badges

Comments

Chris Halcrow · Accepted Answer · 2021-10-07 22:13:30Z

0

You can convert the object to a JSON string using the built-in AngularJS json filter and do a comparison like this:

<div ng-if="vm.testObject | json) != '{}'">
    Test Object is not empty
</div>

answered Oct 7, 2021 at 22:13

Chris Halcrow

32.5k19 gold badges202 silver badges235 bronze badges

Collectives™ on Stack Overflow

Test if an object is an empty object in a AngularJS template

5 Answers 5

3 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related