AngularJS filter by unique attribute value and get the filtered count

Question

i have the following array:

items: [
{
    id: "0",
    name: "כיבוי אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "1",
    name: "הדלקת אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "0",
    name: "תנור מטבח",
    icon: "rooms_salon.svg",
    type: "heater",
    status: 0
},
{
    id: "1",
    name: "מזגן מטבח",
    icon: "rooms_salon.svg",
    type: "ac",
    status: 0
}]

i need to filter it so i get only unique item.type and the count of the original amount of items per type.

the resolute i need:

items: [
    {
        type: "scenario",
        amount: 2
    },
    {
        type: "heater",
        amount: 1
    },
    {
        type: "ac",
        amount: 1
    }
]

What would be the best way to do so?

P.O: i need to filter it in the controller, not in ng-repeat.

Thanks allot

Avi

boindiil · Accepted Answer · 2014-10-06 12:53:32Z

12

You could use the angular-filtermodule to group your items:

$scope.items = [
{
    id: "0",
    name: "כיבוי אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "1",
    name: "הדלקת אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "0",
    name: "תנור מטבח",
    icon: "rooms_salon.svg",
    type: "heater",
    status: 0
},
{
    id: "1",
    name: "מזגן מטבח",
    icon: "rooms_salon.svg",
    type: "ac",
    status: 0
}]

$scope.content = $filter('countBy')($scope.items,'type');

Here you have a working plunker

answered Oct 6, 2014 at 12:53

boindiil

5,8652 gold badges31 silver badges31 bronze badges

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

1 Comment

Aaron Lelevier Over a year ago

Thank you. The angular-filter module is a lot cleaner, and easier than writing my own Javascript to get this functionality and create new Objects each time. +1

Sarath · Accepted Answer · 2014-10-06 13:02:25Z

2

You are not doing a filtering , you need to create a new array with desired values.

or

created a computed filtered value like this

function Ctrl($scope){
    $scope.items = [
        {
            id: "0",
            name: "כיבוי אורות",
            icon: "rooms_salon.svg",
            type: "scenario",
            status: 1
        },
        {
            id: "1",
            name: "הדלקת אורות",
            icon: "rooms_salon.svg",
            type: "scenario",
            status: 1
        },
        {
            id: "0",
            name: "תנור מטבח",
            icon: "rooms_salon.svg",
            type: "heater",
            status: 0
        },
        {
            id: "1",
            name: "מזגן מטבח",
            icon: "rooms_salon.svg",
            type: "ac",
            status: 0
        }];

    Object.defineProperty($scope, 'filtered', {
        get: function(){
            var list = {};
            $scope.items.forEach(function (item) {
                if (list[item.type] === undefined) {
                     list[item.type] = 1;
                } else {
                   list[item.type] += 1;
                }
            });          
            var newItems = [];    
            Object.keys(list).forEach(function(key){      
              newItems.push({  
                 type :key,
                 amount: list[key]
              });    
            });
            return newItems;
        }
    });
}

FIDDLE

edited Oct 6, 2014 at 13:02

answered Oct 6, 2014 at 12:34

Sarath

9,17612 gold badges55 silver badges86 bronze badges

5 Comments

אVי Over a year ago

Thanks for your reply. i need it to be a filter so when the items array in the scope changes, this will change as well. Thanks again Avi

Sarath Over a year ago

if you want to make the change along with that add this as a method to your controller.

אVי Over a year ago

i need that every item that is being added to the items array, will be also added to the filtered array

Sarath Over a year ago

OK.. i edited that with a scope value and returned the desired value as filter

אVי Over a year ago

That's perfect. Thanks allot

Collectives™ on Stack Overflow

AngularJS filter by unique attribute value and get the filtered count

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related