Suppose I have an observable array

[{type:'red' , value:1},
{type:'blue' , value:'2'},
{type:'red' , value:3},
{type:'red' , value:4}]

Now I need an observable value which returns the count form array with type == red and this count updated every time on any change in object of the observable array.

Suppose I have an observable array

[{type:'red' , value:1},
{type:'blue' , value:'2'},
{type:'red' , value:3},
{type:'red' , value:4}]

Now I need an observable value which returns the count form array with type == red and this count updated every time on any change in object of the observable array.

• javascript
• html
• knockout.js

2 Answers 2

You need a puted obervable here, something like this will work (untested):

var yourArray = ko.observableArray([]);

var count = ko.puted(function() {
    var items = ko.utils.arrayFilter(yourArray(), function(item) {
         return item.type == "red";
    });

    return items.length;
});

You can use ko.puted to do this.

Example viewmodel:

function ViewModel() {
    var self = this;
    self.arrayOfObjects= ko.observableArray( [{type:'red' , value:1},{type:'blue' , value:'2'},{type:'red' , value:3},{type:'red' , value:4}]);

    self.count = ko.puted(function() {
        var redItems = ko.utils.arrayFilter(self.arrayOfObjects(), function(arrayItem) {
             return arrayItem.type == 'red';
        });

        return redItems.length;
    });
}

Anything bound to count will have it's value change as the number of red elements changes:

 <span data-bind="text: count"></span>

Example - http://jsfiddle/Wmb47/2/