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

User · Answer

Try this   angular equals      scope card

User · Answer

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

User · Answer

A good and effective way is to use a  json pipe  like the following in your HTML file       lt pre gt    yourObject   json    lt  pre gt    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

User · Answer

You have to just check that the object is null or not  AngularJs provide inbuilt directive ng-if  An example is given below    lt tr ng-repeat  key in object  ng-if  object     null    gt       lt td gt   object key   lt  td gt       lt td gt   object key   lt  td gt   lt  tr gt

User · Answer

Use json filter and compare with      string    lt div gt      My object is     myObject   json             Empty     Not Empty      lt  div gt    ng-show   example    lt div ng-show   myObject   json           gt  lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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                 lt  -- any validation error will trigger an error highlight -- gt   lt span ng-class    has-error     ctrl isEmptyObject  ctrl formFieldErrorRef     gt       lt  -- validated control here -- gt   lt  span gt

User · Answer

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     lt p ng-hide  items   isEmpty  gt Some Content lt  p gt    Via from   Checking if object is empty  works with ng-show but not from controller

User · Answer

I had to validate an empty object check as below  ex     lt div  data-ng-include    xx xx xx regtabs html   data-ng-if         parent  eval  errors   json             gt   lt  div gt    The error is my scope object  it is being defined in my controller as  scope error

User · Answer

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  amp   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  amp  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                            lt div ng-hide  items   isEmpty  gt  Your content s goes here  lt  div gt    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

User · Answer

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

User · Answer

This will do the object empty checking    lt div ng-if  isEmpty card   gt Object Empty  lt  div gt     scope isEmpty   function obj     return Object keys obj  length    0

[javascript] How to check for an empty object in an AngularJS view

Examples related to javascript

Examples related to angularjs