Filtering - simple

by Jaganathan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<table>
    <span> Rejected Users </span>
    <tbody data-bind="foreach: rejectedUsers">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>
<br/>
<table>
    <span> Approved Users </span>
    <tbody data-bind="foreach: approvedUsers">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>

CSS

th
{
    cursor:pointer;
}

span {
    color: red;
}

JavaScript

var viewModel = function(){
    var self = this;
    // consider that this is from ajax success callback
    self.dataFromServer = [
        {firstName:'Jagan',lastName:'B',age:38, isApproved: true},
        {firstName:'Ammu',lastName:'D',age:36, isApproved: false},
        {firstName:'Jagan',lastName:'M',age:10, isApproved: true},
        {firstName:'Megan',lastName:'S',age:7, isApproved: false},
        {firstName:'Mani',lastName:'J',age:40, isApproved: true},
        {firstName:'Ammu',lastName:'K',age:36, isApproved: false},
        {firstName:'Jagan',lastName:'D',age:10, isApproved: true}
    ];
    // convert the normal property to observable array using plugin
    self.users = ko.mapping.fromJS(self.dataFromServer);
    
    // filter approved users
    self.approvedUsers = ko.utils.arrayFilter(self.users(), function(item) { return item.isApproved() === true });
    
    // filter rejected users
    self.rejectedUsers = ko.utils.arrayFilter(self.users(), function(item) { return item.isApproved() === false });
}

ko.applyBindings(new viewModel());