How to check for an empty object in an AngularJS view

Question

In the controller's scope I have something like:

$scope.card = {};

In the view I must check if my object is still an empty literal, {}, or if it contains some data in some fields.

I tried this:

ng-show="angular.equals({}, card)"

and

ng-show="!angular.equals({}, card)"

but it didn't work.

Are there any better ways? How do you check if an object is empty or if it contains some fields?

possible duplicate of [AngularJs: Checking if a js object is empty,works with ng-show but not from controller?](http://stackoverflow.com/questions/17839141/angularjs-checking-if-a-js-object-is-empty-works-with-ng-show-but-not-from-cont) — Ramesh Rajendran, Sep 15 '15 at 13:05

Md Hasan Ibrahim · Accepted Answer · 2017-07-06T10:24:20.083

57

You can use: Object.keys(card).length === 0

But make sure you use it from a method of the controller as the Object is not available in the view, like:

$scope.isObjectEmpty = function(card){
   return Object.keys(card).length === 0;
}

Then you can call the function from the view:

ng-show="!isObjectEmpty(card)"

edited Jul 06 '17 at 10:24

answered Sep 15 '15 at 12:39

Md Hasan Ibrahim

1,868
19
27

i know that, but i need it from the view! – brabertaser19 Sep 15 '15 at 12:41
1

@brabertaser1992, Create a function, pass object as paramter and return true false – Satpal Sep 15 '15 at 12:44
@brabertaser1992, what you wanted to do is not possible AFAIK. Because, the card object needs to have a property function which can do the job. But it's not available. you need to do it through the $scope. – Md Hasan Ibrahim Sep 15 '15 at 12:54

score 20 · Answer 2 · answered Jul 31 '17 at 15:10

20

Use json filter and compare with '{}' string.

<div>
    My object is {{ (myObject | json) == '{}' ? 'Empty' : 'Not Empty' }}
</div>

ng-show example:

<div ng-show="(myObject | json) != '{}'"></div>

answered Jul 31 '17 at 15:10

Wallace Vizerra

3,382
2
28
29

score 8 · Answer 3 · edited Dec 10 '16 at 13:16

8

Try this:

angular.equals({}, $scope.card)

edited Dec 10 '16 at 13:16

Matteo Baldi

5,613
10
39
51

answered Dec 10 '16 at 07:20

Yogesh Kate

307
3
6

Jahongir Rahmonov · Answer 4 · 2016-07-20T05:44:22.520

7

Create a function that checks whether the object is empty:

$scope.isEmpty = function(obj) {
  for(var prop in obj) {
      if(obj.hasOwnProperty(prop))
          return false;
  }
  return true;
};

Then, you can check like so in your html:

ng-show="!isEmpty(card)"

edited Jul 20 '16 at 05:44

answered Sep 15 '15 at 13:13

Jahongir Rahmonov

13,083
10
47
91

Moncef Hassein-bey · Answer 5 · 2015-09-15T13:01:52.317

6

http://plnkr.co/edit/u3xZFRKYCUh4D6hGzERw?p=preview

Because angular is not available from the scope, you can pass it to your controller scope.

$scope.angular = angular;

edited Sep 15 '15 at 13:01

answered Sep 15 '15 at 12:47

Moncef Hassein-bey

1,361
9
14

Actually I though you were wrong but you just saved my day on this. – Jimmy Kane Apr 30 '17 at 15:07

Ramesh Rajendran · Answer 6 · 2018-01-20T07:05:26.713

5

please try this way with filter

angular.module('myApp')
    .filter('isEmpty', function () {
        var bar;
        return function (obj) {
            for (bar in obj) {
                if (obj.hasOwnProperty(bar)) {
                    return false;
                }
            }
            return true;
        };
    });

usage:

 <p ng-hide="items | isEmpty">Some Content</p>

Via from : Checking if object is empty, works with ng-show but not from controller?

edited Jan 20 '18 at 07:05

answered Sep 15 '15 at 13:06

Ramesh Rajendran

37,412
45
153
234

Good snippet. Saved for my projects. – Erick Engelhardt Jun 10 '16 at 13:24

score 2 · Answer 7 · answered Jun 22 '17 at 08:21

2

This will do the object empty checking:

<div ng-if="isEmpty(card)">Object Empty!</div>


$scope.isEmpty = function(obj){
  return Object.keys(obj).length == 0;
}

answered Jun 22 '17 at 08:21

score 1 · Answer 8 · answered Sep 15 '15 at 13:10

1

You should not initialize your variable to an empty object, but let it be undefined or null until the conditions exist where it should have a non-null/undefined value:

$scope.card;

if (someCondition = true) {
    $scope.card = {};
}

Then your template:

ng-show="card"

answered Sep 15 '15 at 13:10

pherris

17,195
8
42
58

This doesn't answer his question, this is an advice. Should be in the comment of his question, not posted as an answer. – bokkie Jan 14 '19 at 16:36

score 1 · Answer 9 · answered Aug 07 '18 at 11:39

You can use plain javascript Object class to achieve it, Object class has keys function which takes 1 argument as input as follows,

Object.keys(obj).length === 0

You can achieve it in 3 ways, 1) Current controller scope 2) Filter 3) $rootScope

1) First way is current controller scope,

$scope.isObjEmpty = function(obj){ return Object.keys(obj).length === 0; }

Then you can call the function from the view:

ng-show="!isObjEmpty(obj)" if you want to show and hide dom dynamically & ng-if="!isObjEmpty(obj)" if you want to remove or add dom dynamically.

2) The second way is a custom filter. Following code should work for the object & Array,

angular.module('angularApp')
    .filter('isEmpty', [function () {
        return function (obj) {
            if (obj == undefined || obj == null || obj == '')
                return true;
            if (angular.isObject(obj))
                return Object.keys(obj).length != 0;

            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    return false;
                }
            }
            return true;
        };
    }]);

    <div ng-hide="items | isEmpty"> Your content's goes here </div>

3) The third way is $rootScope, create a plain javascript function and add it in $rootScope server it will accessible default in all scopes and UI.

function isObjEmpty (obj){ return Object.keys(obj).length === 0; }

$rootScope.isObjEmpty = isObjEmpty ;

score 0 · Answer 10 · edited Sep 15 '15 at 13:03

0

Create a $scope function that check it and returns true or false, like a "isEmpty" function and use in your view on ng-if statement like

ng-if="isEmpty(object)"

edited Sep 15 '15 at 13:03

Ramesh Rajendran

37,412
45
153
234

answered Sep 15 '15 at 12:48

Thiago Sciotta

16
3

score 0 · Answer 11 · answered Dec 07 '16 at 13:42

I have met a similar problem when checking emptiness in a component. In this case, the controller must define a method that actually performs the test and the view uses it:

function FormNumericFieldController(/*$scope, $element, $attrs*/ ) {
    var ctrl = this;

    ctrl.isEmptyObject = function(object) {
        return angular.equals(object, {});
    }
}

<!-- any validation error will trigger an error highlight -->
<span ng-class="{'has-error': !$ctrl.isEmptyObject($ctrl.formFieldErrorRef) }">
    <!-- validated control here -->
</span>

score 0 · Answer 12 · edited Mar 02 '18 at 09:24

0

I had to validate an empty object check as below

ex:

<div  data-ng-include="'/xx/xx/xx/regtabs.html'" data-ng-if =
    "$parent.$eval((errors | json) != '{}')" >
</div>

The error is my scope object, it is being defined in my controller as $scope.error = {};

edited Mar 02 '18 at 09:24

Eduardo Russo

4,121
2
22
38

answered Mar 02 '18 at 07:04

priya gupta

1
1

1

Hi Priya! Welcome to Stack Overflow! If you edit your answer & explain why your code is cool, then it stands a better chance of receiving upvotes. Those will boost your reputation upwards! Here are some suggestions, which will help to make your answer better: 1. When creating answers, would you please add the proper capitalization & punctuation to your answers? 2. Could you edit the code example, to remove the extra white-spacing between attributes? 3. Adding links to external documentation or quotes from those sources are usually helpful too. Welcome to the SO community! :) – Clomp Mar 02 '18 at 07:41

score 0 · Answer 13 · answered May 18 '19 at 11:14

A good and effective way is to use a "json pipe" like the following in your HTML file:

   <pre>{{ yourObject | json }}</pre>

which allows you to see clearly if the object is empty or not.

I tried quite a few ways that are showed here, but none of them worked.

score 0 · Answer 14 · answered Nov 06 '21 at 21:44

If you plan on using a lot of the methods and properties of Object in your Angular JS app, why not use:

angular.module('core').run(function ($rootScope) {
     $rootScope.Object = window.Object;
});

Then in your view, you could do something like:

<div ng-if="Object.keys(fooBar).length > 0"></div>

score -1 · Answer 15 · answered Dec 21 '17 at 12:09

-1

You have to just check that the object is null or not. AngularJs provide inbuilt directive ng-if. An example is given below.

<tr ng-repeat="key in object" ng-if="object != 'null'" >
    <td>{{object.key}}</td>
    <td>{{object.key}}</td>
</tr>

answered Dec 21 '17 at 12:09

shriram

14
1

How to check for an empty object in an AngularJS view

15 Answers15

Linked