Sort JSON Data Using AngularJS

Saturday 19 December 2015 | Posted by
This is example of sorting users JSON data based on user's input and showing them in clean way. Click here to know how text box with reset button (Clear field) works
Click here to see DEMO

JSON Data

Find below Users info in JSON format
$scope.userData = [{
   "id": "1",
   "name": "Srinivas Dasari",
   "place": "Chennai",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg"
 }, {
   "id": "2",
   "name": "Srinivas Tamada",
   "place": "Atlanta",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg"
 }, {
   "id": "3",
   "name": "Sri Harsha",
   "place": "Hyderabad",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg"
 }, {
   "id": "4",
   "name": "Lokesh Raghuram",
   "place": "London",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg"
 }, {
   "id": "5",
   "name": "Bala Ganesh",
   "place": "Chennai",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg"
 }, {
   "id": "6",
   "name": "Arun kumar",
   "place": "Visakhapatnam",
   "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/s160-Ic42/arun.jpg"
 }];

Markup

By using orderBy, we can sort JSON data. Observe below highlighted code
<div class="slinput" ng-init="">
   <i class="fa fa-search left-icon"></i>
   <input placeholder="Search here" ng-model="searchInputVal" />
   <i ng-class="{'fa' : true, 'fa-close' : true, 'right-icon' : true, active : (searchInputVal.length > 0)}" ng-click="searchInputVal = ''"></i>
 </div>
 <div ng-init="sortOrderVal = 'name'" style="padding: 10px 10px;background: white;">
   Sort By &nbsp
   <label class="radio-inline">
     <input type="radio" value="name" ng-model="sortOrderVal"> name
   </label>
   <label class="radio-inline">
     <input type="radio" value="place" ng-model="sortOrderVal"> place
   </label>
 </div>
 <div class="media user animate-repeat" ng-repeat="user in userData | filter:searchInputVal | orderBy:sortOrderVal">
   <div class="media-left">
     <a href="#">
       <img class="media-object" src="{{user.pic}}" alt="...">
     </a>
   </div>
   <div class="media-body">
     <h4 class="media-heading">{{user.name}}</h4> {{user.place}}
   </div>
 </div>
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts