Displaying a count/length of an array variable

Question

I am trying to display exactly how many of an array variable I have, not just the items in the array, but one of the 'tags' assigned to it.

$scope.products = [
    {
      too: 'xxx-xxx-xxx',
       foo:  'xxx',
        bar: 'xxx-xxx',
                }
                }
            ];

When I try to list the length of one of the 'tags' for example "Foo".

Using {{foo.length}} will not work.

I would want my HTML to look something like this:

Menu 1 (1) <--- With this being the "foo" value.

*The foo value will change based on the amount of 'items' i have in my array, so if I had an array like this:

   $scope.products = [
                   {
          too: 'xxx-xxx-xxx',
           foo:  'xxx',
            bar: 'xxx-xxx',
                    }
            {
              too: 'yyy-yyy-yyy',
               foo:  'yyy',
                bar: 'yyy-yyy',
                        }
                        }
                    ];

the HTML would reflect that I now have '2' values of 'foo', so it would say Menu 1 (2), and so on and so forth.. How can I accomplish this?

$scope.products.filter(function (item) { return item.hasOwnProperty('foo') }).length -- try this. This will give the number of elements having foo property — Vinay K
– Vinay K, Commented Feb 26, 2015 at 14:05
I added that into a new function, should I just print it to screen? or is there a better solution for that? — knocked loose
– knocked loose, Commented Feb 26, 2015 at 14:09

ryanyuyu · Accepted Answer · 2015-02-26 14:31:10Z

1

You can write a javascript function and just call it. (updated to only count unique foos)

$scope.countUniqueFoos = function () {
    var uniqueFoos = []; //you could also keep this as a $scope variable if needed
    $scope.products.forEach( function (product) {
        if (product.hasOwnProperty('foo') && uniqueFoos.indexOf(product.foo) == -1) {
             uniqueFoos.push(product.foo);
        }
    });
    return uniqueFoos.length;
};

And in the HTML:

<div>NumFoos: {{countUniqueFoos()}}</div>

edited Feb 26, 2015 at 14:31

answered Feb 26, 2015 at 14:10

ryanyuyu

6,50611 gold badges53 silver badges56 bronze badges

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

3 Comments

knocked loose Over a year ago

Thanks for the answer, so far this works! My only concern is, is it just counting how many times 'foo' appears in my products array? or is it counting individual foo values, said one value was 'xxx' and another 'yyy'. This function would count (2). If I had a duplicate value such as 'xxx', 'xxx', and 'yyy'. Would it count 2 since 'xxx' and 'xxx' are the same? or would it count 3 since there are 3 instances of 'foo'? Edit: Just did a check, and it counts number 'foo' appears, not the number of unique 'foos' (xxx, yyy, zzz) = 3 but (xxx, xxx, yyy) should only = 2.

knocked loose Over a year ago

That would be wonderful, I appreciate the help. In the mean time I'll keep researching the issue myself. Thanks!

knocked loose Over a year ago

Wow! Thank you for the fast response, this is excellent! Exactly what I needed, thanks!

Collectives™ on Stack Overflow

Displaying a count/length of an array variable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related