Unable to call Object.keys in angularjs
Solution 1
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 }}
Solution 2
Use the function to determine the number of object properties:
$scope.keyLength = function (obj) {
return Object.keys(obj).length;
}
and use:
{{ keyLength(myObj) }}
Solution 3
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;
};
}]);
Related videos on Youtube
Gargoyle
I run Gargoyle Software, LLC. It's a one-man software shop focused on custom iOS applications, and every once and a while a smallish mac application, based on what my customers need.
Updated on July 09, 2022Comments
-
Gargoyle almost 2 years
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. ThebyClient
data structure basically looks like so:{ "Client Name" : { "Station Name": [ {...}, {...} ] } }
-
KiriSakow almost 4 yearsTry
{{ (stations | keys).length }} stations
-
-
Matthew.Lothian over 9 yearsJust as i would have said it +1
-
Anmol Saraf over 9 yearsvery nice. You have given two perfect solutions! Thanks :)
-
AJ Richardson over 8 yearsIf you are using an isolate scope, you will need to use
{{ $root.Utils.keys(stations).length }}
-
PSL over 8 years@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 about 8 yearswhy this not exists by default in Angular, is so useful !
-
Akash Rao about 8 yearsHow to use Object.keys in angularjs2.
-
Greg over 7 yearsAlso I would check for undefined while passing the object as Angular will throw a exception
app.run(function($rootScope){ $rootScope.Utils = { keys : function (o) { return Object.keys(o || {}); } }; })
, btw this is every useful.