Post
Ask Question

Apply Sort Function on Observable Array Using KnockoutJS

Introduction

 
In my previous article I explained:
In today's article I will tell you how to apply a Sort Function on an Observable Array using KnockoutJS.
 
The Sort function is used to sort the data present in the Array, in the sorted Array we pass another function that returns the value by comparing them.
 
Step 1
 
First of all, you need to add an external Knockout js file into your application, you can either download it from this link: "KnockoutJS" or can download my application available at the beginning of this article in Zip Format and then use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="knockout-2.3.0.js"></script>  
  4. </head>  
Step 2
 
Now we can work on our application. First we will work on the ViewModel. For that you need to add a Script tag under the Body Section and then need add this code:
  1. <script>  
  2. function x() {  
  3.     var self = this;  
  4.     self.trainee = ko.observableArray([  
  5.         { name: 'Anubhav' },  
  6.         { name: 'Mohit' },  
  7.         { name: 'Ashish' },  
  8.         { name: 'Sammy' },  
  9.         { name: 'Brijesh' }  
  10.     ]);  
  11.   
  12.     self.sortPeople = function() {  
  13.         self.trainee.sort(function(left, right) {  
  14.             return left.name == right.name ? 0 : (left.name < right.name ? -1 : 1)  
  15.         });  
  16.     }  
  17. }  
  18. ko.applyBindings(new x());  
  19. </script>  
Here first I created a function named "x()".
 
In this function I created an object named "self" that will represent the current function.
 
Then I created an Observable Array named "Trainee()". In this Array I provided three names as default names.
 
Then a function is created named "sortPeople", in this function one more function is created, the sort function. In this sort function, two objects are accepted from the array that will return the negative value. If the first argument is smaller then it will return a positive value, if the first argument is bigger. If the values are the same then zero will be returned.
 
At the end I applied the Binding to the x().
 
Step 3
 
Our work on the ViewModel is now completed so we can move towards the View of our application.
 
Write this code in the view part of your application:
  1. <input type="button" data-bind="click:sortPeople" value="Click me" />  
  2. <ul data-bind="foreach: trainee">  
  3.     <li data-bind="text:name"></li>  
  4. </ul>  
Here I simply created a button bound to the sortPeople function, this function is bound to the click event of this button.
 
Then I created an Unordered List that is bound to the Array "tarinee".
 
So, now what will happen is that at run time all the employees will be seen in the same order as they are declared but as you click on the button, all the names will be sorted.
 
The complete code of this application is as follows:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head runat="server">  
  4.         <title></title>  
  5.         <script src="knockout-2.3.0.js"></script>  
  6.     </head>  
  7.   
  8.     <body>  
  9.         <form id="form1" runat="server">  
  10.             <input type="button" data-bind="click:sortPeople" value="Click me" />  
  11.             <ul data-bind="foreach: trainee">  
  12.                 <li data-bind="text:name"></li>  
  13.             </ul>  
  14.             <script>  
  15.             function x() {  
  16.                 var self = this;  
  17.                 self.trainee = ko.observableArray([  
  18.                     { name: 'Anubhav' },  
  19.                     { name: 'Mohit' },  
  20.                     { name: 'Ashish' },  
  21.                     { name: 'Sammy' },  
  22.                     { name: 'Brijesh' }  
  23.                 ]);  
  24.   
  25.                 self.sortPeople = function() {  
  26.                     self.trainee.sort(function(left, right) {  
  27.                         return left.name == right.name ? 0 : (left.name < right.name ? -1 : 1)  
  28.                     });  
  29.                 }  
  30.             }  
  31.             ko.applyBindings(new x());  
  32.             </script>  
  33.         </form>  
  34.     </body>  
  35.   
  36. </html>  
Output
 
On running the code you will get output like this:
 
sort function knockout1
 
But as you click on the button then all the names will be sorted.
 
sort function knockout2


Similar Articles