How to count map size in AngularJS

Question

I have a map with key values as follows

$scope.items = {
  {
    0={"name": "Jim", "age" : 25}
  },
  {
    1={"name": "Eric", "age" : 25}
  }
};

if it was an array to count the size I with do:

<div ng-repeat="item in items>
</div>

and have the size {{items.length}}

In case of a map I with iterate items as follows:

<div ng-repeat="(id, item) in items">
</div>

but how to establish the size?

Any help is appreciated.

Can you fix your object structure? Right now it's not valid. — dfsq
– dfsq, Commented Feb 25, 2015 at 10:29
Well it's still not valid javascript syntax. Looks like you indeed need an array: $scope.items = [{"name": "Jim", "age" : 25}, {"name": "Eric", "age" : 25}]. Or if this is an object then: $scope.items = {0: {"name": "Jim", "age" : 25}, 1: {"name": "Eric", "age" : 25}}. — dfsq
– dfsq, Commented Feb 25, 2015 at 10:34

dfsq · Accepted Answer · 2015-02-25 10:35:42Z

15

One approach is to calculate number of keys in the object using Object.keys:

$scope.itemsLength = Object.keys($scope.items).length;

you can also define a helper function:

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

and use it in template:

{{ getLength(items) }}

edited Feb 25, 2015 at 10:35

answered Feb 25, 2015 at 10:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

mzereba Over a year ago

But I need it on the page

mzereba Over a year ago

It seems that this is the only way, since there is not function to call the map size.

Joao Polo Over a year ago

I agree with your approach, but @Magini your model for array is very estrange... You should to try a default array using [ ... ].

mzereba Over a year ago

@JoaozitoPolo I use this as (key, value) map and not array that's why :)

jjmontes · Accepted Answer · 2016-09-15 08:25:26Z

4

I suggest to use a filter for this, which can be used across the application:

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

Then use it:

{{ items | objectKeysLength }}

or

<div ng-if="(items | objectKeysLength) > 0" >
    ...content...
</div>

answered Sep 15, 2016 at 8:25

jjmontes

27.2k5 gold badges47 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to count map size in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related