Unable to call Object.keys in angularjs

Question

I'm using a UI.Bootstrap accordion and I've defined my heading like so:

<accordion-group ng=repeat="(cname, stations) in byClient">
    <accordion-heading>
        {{ cname }} <span class="pull-right"> {{ Object.keys(stations).length }} Stations</span>
    </accordion-heading>

When that displays the Object.keys(stations).length resolves to nothing. If I put that same length call in my controller I get back the expected count. Is there something preventing the method call from working in AngularJS?

The rest of the accordion that uses stations acts as expected, so I know that it's being populated properly. The byClient data structure basically looks like so:

{
    "Client Name" : {
        "Station Name": [
            {...},
            {...}
        ]
    }
 }

Try {{ (stations | keys).length }} stations

KiriSakow
– KiriSakow

2020-06-04 08:47:51 +00:00
Commented Jun 4, 2020 at 8:47 — KiriSakow
– KiriSakow, Commented Jun 4, 2020 at 8:47

PSL · Accepted Answer · 2015-10-28 19:01:58Z

88

Yes, That is because Object is a part of window/global and angular cannot evaluate that expression against the scope. When you specify Object.keys in your binding angular tries to evaluate it against the $scope and it does not find it. You could store the reference of object.keys in some utility in rootScope and use it anywhere in the app.

Something like this:-

angular.module('yourApp',[deps...]).run(function($rootScope){
  //Just add a reference to some utility methods in rootscope.
  $rootScope.Utils = {
     keys : Object.keys
  }

  //If you want utility method to be accessed in the isolated Scope 
  //then you would add the method directly to the prototype of rootScope 
  //constructor as shown below in a rough implementation.

  //$rootScope.constructor.prototype.getKeys = Object.keys;

});

and use this as:-

<span class="pull-right"> {{ Utils.keys(stations).length }} Stations</span>

Well this will be available to any child scopes except for isolated scopes. If you are planning to do it on the isolated scope (eg:- Isolated scoped directives) you would need to add the reference of Object.keys on the scope, or as you expose a method on the scope which will return the length.

Or better yet , create a format filter to return the keylength and use it everywhere.

app.filter('keylength', function(){
  return function(input){
    if(!angular.isObject(input)){
      throw Error("Usage of non-objects with keylength filter!!")
    }
    return Object.keys(input).length;
  }
});

and do:-

{{ stations | keylength }}

Demo

edited Oct 28, 2015 at 19:01

answered Aug 14, 2014 at 3:24

PSL

124k21 gold badges257 silver badges243 bronze badges

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

7 Comments

Matthew.Lothian Over a year ago

Just as i would have said it +1

Anmol Saraf Over a year ago

very nice. You have given two perfect solutions! Thanks :)

AJ Richardson Over a year ago

If you are using an isolate scope, you will need to use {{ $root.Utils.keys(stations).length }}

PSL Over a year ago

@AJRichardson That is a very good point you made there. What you can do is instead of adding it in the rootScope instance add it to the prototype. i.e $rootScope.constructor.prototype.getKeys = Object.keys. It should then be available in the isolate scope as well. Similar to what i did here

Benjamin Fuentes Over a year ago

why this not exists by default in Angular, is so useful !

|

Alex V · Accepted Answer · 2017-08-29 09:54:20Z

4

Use the function to determine the number of object properties:

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

and use:

{{ keyLength(myObj) }}

answered Aug 29, 2017 at 9:54

Alex V

611 gold badge1 silver badge9 bronze badges

Comments

jjmontes · Accepted Answer · 2017-12-04 22:50:07Z

2

I think filters are the most AngularJS way of handling structures in template code:

angular.module('app.filters').filter('objectKeysLength', [function() {
    return function(items) {
        return Object.keys(items).length;
    };
}]);

angular.module('app.filters').filter('objectKeys', [function() {
    return function(item) {
        if (!item) return null;
        var keys = Object.keys(item);
        keys.sort();
        return keys;
    };
}]);

answered Dec 4, 2017 at 22:50

jjmontes

27.2k5 gold badges47 silver badges53 bronze badges

Comments

Konstantin Vahrushev · Accepted Answer · 2018-10-09 16:39:37Z

0

In case someone searches for angular 2 and higher solution. It now hat keyvalue pipe, which can be used to interate over objects

answered Oct 9, 2018 at 16:39

Konstantin Vahrushev

1,2572 gold badges13 silver badges24 bronze badges

Comments

Cory Koch · Accepted Answer · 2020-02-20 22:33:48Z

0

I could not get any of the other answers to work in AngularJS 1.6. What worked for me using $window to acccess Object.keys like this $window.Object.keys({ 'a': 1, 'b': 2 })

answered Feb 20, 2020 at 22:33

Cory Koch

5245 silver badges10 bronze badges

Comments

shekhar chander · Accepted Answer · 2022-01-26 09:24:14Z

0

Here's a solution that worked for me :

export class xyzcomponent{
    Key = Object.keys;
}

Now in the component html file, you can use something like that :

<li *ngFor="let i of Key(stations)">.........</li>

answered Jan 26, 2022 at 9:24

shekhar chander

6181 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Unable to call Object.keys in angularjs

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related