How To Perform CRUD Operation Using JSON File With Sorting And Paging In Angular - Part One

Today, in this article, we will learn how to perform CRUD operation with paging, sorting, validation, and also using file upload control, and then, how to retrieve the records from JSON file. Also, we will perform bulk delete operation using checkbox.

So here, I have divided the article into two parts - Part 1 and Part 2

In part1, I will retrieve data and display the records from JSON file with sorting and paging.

In Part2, I will perform Insert, Update, and Delete operations.

So now, we will perform the first part, i.e., reading the data from JSON with sorting and paging.

Step 1

Download the AngularJS library.

AngularJS

Step 2

We will add a JSON file. For that, go to Solution Explorer and right-click to select a new item. Select JSON file, name it and click "Add".

AngularJS

Now, let's write some records related to employee information in JSON format.

Employee.json

  1. {  
  2.   "Employees": [  
  3.     {  
  4.       "id": 1,  
  5.       "firstName""Mithilesh",  
  6.       "lastName""Mithilesh",  
  7.       "address""Hyderabad",  
  8.       "dateOfBirth""2013-01-08",  
  9.       "phoneNo""8923742593",  
  10.       "emailId""[email protected]",  
  11.       "image""../images/mk253.jpg#",  
  12.       "LogoName""logo-icon.png",  
  13.       "selected"false  
  14.     },  
  15.   
  16.     {  
  17.       "id": 2,  
  18.       "firstName""Sanjeev",  
  19.       "lastName""Kumar",  
  20.       "address""Delhi",  
  21.       "dateOfBirth""2003-01-08",  
  22.       "phoneNo""8923756993",  
  23.       "emailId""[email protected]",  
  24.       "image""../../images/mk253.jpg#",  
  25.       "LogoName""logo-icon.png",  
  26.       "selected"false  
  27.     },  
  28.     {  
  29.       "id": 3,  
  30.       "firstName""Neha",  
  31.       "lastName""Kumari",  
  32.       "address""Hyderabad",  
  33.       "dateOfBirth""2013-01-08",  
  34.       "phoneNo""892374293",  
  35.       "emailId""[email protected]",  
  36.       "image""../images/flowers.jpg#",  
  37.       "LogoName""logo-icon.png",  
  38.       "selected"false  
  39.     },  
  40.     {  
  41.       "id": 4,  
  42.       "firstName""Sohan",  
  43.       "lastName""Singh",  
  44.       "address""Cuttack",  
  45.       "dateOfBirth""2010-01-08",  
  46.       "phoneNo""892374293",  
  47.       "emailId""[email protected]",  
  48.       "image""../../images/yellow_beautiful_roses-normal.jpg",  
  49.       "LogoName""logo-icon.png",  
  50.       "selected"false  
  51.     },  
  52.     {  
  53.       "id": 5,  
  54.       "firstName""Sony",  
  55.       "lastName""Singh",  
  56.       "address""Cuttack",  
  57.       "dateOfBirth""2010-01-08",  
  58.       "phoneNo""892374293",  
  59.       "emailId""[email protected]",  
  60.       "image""../../images/yellow_beautiful_roses-normal.jpg",  
  61.       "LogoName""logo-icon.png",  
  62.       "selected"false  
  63.     },  
  64.     {  
  65.       "id": 6,  
  66.       "firstName""Kajal",  
  67.       "lastName""Kumari",  
  68.       "address""Patna",  
  69.       "dateOfBirth""2011-01-08",  
  70.       "phoneNo""892374293",  
  71.       "emailId""[email protected]",  
  72.       "image""../../images/yellow_beautiful_roses-normal.jpg",  
  73.       "LogoName""logo-icon.png",  
  74.       "selected"false  
  75.     }  
  76.   
  77.   ],  
  78.   "selected": {}  
  79. }   

Step 3

When we create Angular.js applications, first we add ng-app directive. This is the starting point or root element of any AngularJS application.

So first, we have to create ng-app. For this, add a JavaScript file. Right click on Solution Explorer, go to Add >> New Item and choose a JavaScript File.

AngularJS

Click "Add" button and write the app code using module.

App.js

  1. var AngularExample = angular.module('AngularExampleApp', ['ui.bootstrap']);  

Note

AngularExample: This is the name of the variable of ng-app.

'AngularExampleApp' : This is the name of ng-app of our application.

'ui.bootstrap' : This is the botstrap ui for design and the functionality of paging

Step 4

Now, we will create some services for using in this application. So, add a JavaScript file and write this code.

Service.js

  1. AngularExample.factory('MyService'function () {  
  2.     return {  
  3.         EmployeesUri: '/JsonData/Employee.json'  
  4.     }  
  5. });  
  6.   
  7. //$Http Services  
  8. AngularExample.factory('Service',  
  9.     ["$http",  
  10.         function ($http) {  
  11.             return {  
  12.                 get: function (url) {  
  13.                     var promise = $http.get(url)  
  14.                     .success(function (data, status) {  
  15.                         return data;  
  16.                     })  
  17.                     .error(function (data, status) {  
  18.                         return { "status"false };  
  19.                     });  
  20.                     //$scope.isLoading = false;  
  21.                     return promise;  
  22.                 }  
  23.             }  
  24.   
  25.         }]);  

In above js file, we created two services - for reading the JSON data from read Employee.json file and another one is HTTP service.

And also, we have created Config service for paging definition.

Config.js

  1. AngularExample.constant('config', {  
  2.     paginationItemsPerPage: 4  
  3. }); 

Step 5

Now, we will create ng-controller. ng-controller is an AngularJS directive that controls the data in Angular application. Also, we will include all the services which are created for our application.

So for this, add a JavaScript file. Here, I took EmployeeController for demo.

EmployeeController.js

AngularExample

  1. .controller("EmployeeController", ['$scope''Service''MyService','config'function ($scope, Service, MyService,config) {  
  2.   
  3.     $scope.data = [];  
  4.     $scope.Employees = [];  
  5.     $scope.employee = {};  
  6.   
  7.   
  8.     //Http Services Get Data  
  9.     Service.get(MyService.EmployeesUri)  
  10.     .then(function (response) {  
  11.         $scope.Employees = response.data;  
  12.         $scope.totalItems = $scope.Employees.Employees.length;  
  13.        
  14.         $scope.currentPage = 1;  
  15.         $scope.numPerPage = config.paginationItemsPerPage;  
  16.           
  17.         //Pagination control  
  18.         $scope.paginate = function (value) {  
  19.               
  20.             $scope.begin = ($scope.currentPage - 1) * $scope.numPerPage;  
  21.             $scope.end = $scope.begin + $scope.numPerPage;  
  22.             index = $scope.Employees.Employees.indexOf(value);  
  23.             return ($scope.begin <= index && index < $scope.end);  
  24.   
  25.         };  
  26.     });  
  27.   
  28.   
  29.   
  30.      
  31. }]);  

Note

$scope: The scope is a JavaScript object with properties and methods, which are available for both the view and the controller. This is the binding part between the view and  controller.

Step 6

Now, we will create HTML View for binding all data and show it in View. So for this, we have to create an HTML page and write the code. First, we have to add ng-app and ng-controller in our HTML page. 

Display.cshtml (Here, I am using MVC View)

  1. <link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />  
  2. <script src="~/Scripts/jquery-2.1.4.js"></script>  
  3. <script src="~/Scripts/EmployeesController.js"></script>  
  4. <script src="~/Services/Service.js"></script>  
  5. <script src="~/Services/config.js"></script>  
  6. <script src="~/Scripts/UI-BootStrap-tpls.js"></script>  
  7. <script src="~/Scripts/jquery.datetimepicker.js"></script>  
  8. <div>  
  9.     <br /><br />  
  10.     <div  ng-controller="EmployeeController">  
  11.   
  12.         <div class="form-group">  
  13.             @*<span class="Ename">Employee</span>*@  
  14.             <table class="table tablehead">  
  15.                 <thead>  
  16.                     <tr class="btn-warning">  
  17.                         <th>  
  18.                             <a ng-click="orderByField='enddate'; reverseSort = !reverseSort">  
  19.                                 Employee Id <span ng-show="orderByField == 'enddate'">  
  20.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  21.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  22.                                 </span>  
  23.                             </a>  
  24.                         </th>  
  25.                         <th>  
  26.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  27.                                 First Name<span ng-show="orderByField == 'startdate'">  
  28.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  29.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  30.                                 </span>  
  31.                             </a>  
  32.   
  33.                         </th>  
  34.                         <th>  
  35.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  36.                                 Last Name<span ng-show="orderByField == 'startdate'">  
  37.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  38.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  39.                                 </span>  
  40.                             </a>  
  41.   
  42.                         </th>  
  43.                         <th>  
  44.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  45.                                 Address<span ng-show="orderByField == 'startdate'">  
  46.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  47.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  48.                                 </span>  
  49.                             </a>  
  50.   
  51.                         </th>  
  52.                         <th>  
  53.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  54.                                Date Of Birth<span ng-show="orderByField == 'startdate'">  
  55.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  56.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  57.                                 </span>  
  58.                             </a>  
  59.   
  60.                         </th>  
  61.                         <th>  
  62.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  63.                                 Phone Number<span ng-show="orderByField == 'startdate'">  
  64.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  65.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  66.                                 </span>  
  67.                             </a>  
  68.   
  69.                         </th>  
  70.                         <th>  
  71.                             <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">  
  72.                                Email Id<span ng-show="orderByField == 'startdate'">  
  73.                                     <span ng-show="!reverseSort" class="icon-move-up"></span>  
  74.                                     <span ng-show="reverseSort" class="icon-move-down"></span>  
  75.                                 </span>  
  76.                             </a>  
  77.   
  78.                         </th>  
  79.                         <th>  
  80.                             Image  
  81.                         </th>  
  82.                       
  83.                     </tr>  
  84.                 </thead>  
  85.                 <tbody>  
  86.                     <tr class="btn-primary" date-Input ng-repeat="employee in Employees.Employees  | filter : paginate |orderBy:orderByField:reverseSort">  
  87.   
  88.                      
  89.                         <td>{{employee.id}}</td>  
  90.                         <td>{{employee.firstName}}</td>  
  91.                         <td>{{employee.lastName}}</td>  
  92.                         <td>{{employee.address}}</td>  
  93.                         <td>{{employee.dateOfBirth |  date:'yyyy/MM/dd'}}</td>  
  94.                         <td>{{employee.phoneNo}}</td>  
  95.                         <td>{{employee.emailId}}</td>  
  96.                         <td><img width="80" height="50" ng-src="{{employee.image}}" class="logo-img" /></td>  
  97.                       
  98.                     </tr>  
  99.                 </tbody>  
  100.             </table>  
  101.   
  102.             <pagination total-items="totalItems" ng-model="currentPage"  
  103.                         max-size="20" boundary-links="true"  
  104.                         items-per-page="numPerPage" first-text="<<" previous-text="<" next-text=">" last-text=">>" class="pagination-lg">  
  105.             </pagination>  
  106.   
  107.         </div>  

Step 7

Now, our coding part is completed. Let's run the project and see the result.

AngularJS

 Also, check the sorting and paging.

AngularJS

Here, we have completed retrieval of data from JSON and displayed that in View with sorting and paging.

We will complete Insert, Update, and Delete operations in my next article.