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.

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".



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

Employee.json

{
  "Employees": [
    {
      "id": 1,
      "firstName": "Mithilesh",
      "lastName": "Mithilesh",
      "address": "Hyderabad",
      "dateOfBirth": "2013-01-08",
      "phoneNo": "8923742593",
      "emailId": "[email protected]",
      "image": "../images/mk253.jpg#",
      "LogoName": "logo-icon.png",
      "selected": false
    },

    {
      "id": 2,
      "firstName": "Sanjeev",
      "lastName": "Kumar",
      "address": "Delhi",
      "dateOfBirth": "2003-01-08",
      "phoneNo": "8923756993",
      "emailId": "[email protected]",
      "image": "../../images/mk253.jpg#",
      "LogoName": "logo-icon.png",
      "selected": false
    },
    {
      "id": 3,
      "firstName": "Neha",
      "lastName": "Kumari",
      "address": "Hyderabad",
      "dateOfBirth": "2013-01-08",
      "phoneNo": "892374293",
      "emailId": "[email protected]",
      "image": "../images/flowers.jpg#",
      "LogoName": "logo-icon.png",
      "selected": false
    },
    {
      "id": 4,
      "firstName": "Sohan",
      "lastName": "Singh",
      "address": "Cuttack",
      "dateOfBirth": "2010-01-08",
      "phoneNo": "892374293",
      "emailId": "[email protected]",
      "image": "../../images/yellow_beautiful_roses-normal.jpg",
      "LogoName": "logo-icon.png",
      "selected": false
    },
    {
      "id": 5,
      "firstName": "Sony",
      "lastName": "Singh",
      "address": "Cuttack",
      "dateOfBirth": "2010-01-08",
      "phoneNo": "892374293",
      "emailId": "[email protected]",
      "image": "../../images/yellow_beautiful_roses-normal.jpg",
      "LogoName": "logo-icon.png",
      "selected": false
    },
    {
      "id": 6,
      "firstName": "Kajal",
      "lastName": "Kumari",
      "address": "Patna",
      "dateOfBirth": "2011-01-08",
      "phoneNo": "892374293",
      "emailId": "[email protected]",
      "image": "../../images/yellow_beautiful_roses-normal.jpg",
      "LogoName": "logo-icon.png",
      "selected": false
    }

  ],
  "selected": {}
}

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.



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

App.js

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

AngularExample.factory('MyService', function () {
    return {
        EmployeesUri: '/JsonData/Employee.json'
    }
});

//$Http Services
AngularExample.factory('Service',
    ["$http",
        function ($http) {
            return {
                get: function (url) {
                    var promise = $http.get(url)
                    .success(function (data, status) {
                        return data;
                    })
                    .error(function (data, status) {
                        return { "status": false };
                    });
                    //$scope.isLoading = false;
                    return promise;
                }
            }

        }]);

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

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

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

.controller("EmployeeController", ['$scope', 'Service', 'MyService','config', function ($scope, Service, MyService,config) {

    $scope.data = [];
    $scope.Employees = [];
    $scope.employee = {};


    //Http Services Get Data
    Service.get(MyService.EmployeesUri)
    .then(function (response) {
        $scope.Employees = response.data;
        $scope.totalItems = $scope.Employees.Employees.length;

        $scope.currentPage = 1;
        $scope.numPerPage = config.paginationItemsPerPage;

        //Pagination control
        $scope.paginate = function (value) {

            $scope.begin = ($scope.currentPage - 1) * $scope.numPerPage;
            $scope.end = $scope.begin + $scope.numPerPage;
            index = $scope.Employees.Employees.indexOf(value);
            return ($scope.begin <= index && index < $scope.end);

        };
    });




}]);

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)

<link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/EmployeesController.js"></script>
<script src="~/Services/Service.js"></script>
<script src="~/Services/config.js"></script>
<script src="~/Scripts/UI-BootStrap-tpls.js"></script>
<script src="~/Scripts/jquery.datetimepicker.js"></script>
<div>
    <br /><br />
    <div  ng-controller="EmployeeController">

        <div class="form-group">
            @*<span class="Ename">Employee</span>*@
            <table class="table tablehead">
                <thead>
                    <tr class="btn-warning">
                        <th>
                            <a ng-click="orderByField='enddate'; reverseSort = !reverseSort">
                                Employee Id <span ng-show="orderByField == 'enddate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>
                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                                First Name<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                                Last Name<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                                Address<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                               Date Of Birth<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                                Phone Number<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            <a ng-click="orderByField='startdate'; reverseSort = !reverseSort">
                               Email Id<span ng-show="orderByField == 'startdate'">
                                    <span ng-show="!reverseSort" class="icon-move-up"></span>
                                    <span ng-show="reverseSort" class="icon-move-down"></span>
                                </span>
                            </a>

                        </th>
                        <th>
                            Image
                        </th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="btn-primary" date-Input ng-repeat="employee in Employees.Employees  | filter : paginate |orderBy:orderByField:reverseSort">


                        <td>{{employee.id}}</td>
                        <td>{{employee.firstName}}</td>
                        <td>{{employee.lastName}}</td>
                        <td>{{employee.address}}</td>
                        <td>{{employee.dateOfBirth |  date:'yyyy/MM/dd'}}</td>
                        <td>{{employee.phoneNo}}</td>
                        <td>{{employee.emailId}}</td>
                        <td><img width="80" height="50" ng-src="{{employee.image}}" class="logo-img" /></td>

                    </tr>
                </tbody>
            </table>

            <pagination total-items="totalItems" ng-model="currentPage"
                        max-size="20" boundary-links="true"
                        items-per-page="numPerPage" first-text="<<" previous-text="<" next-text=">" last-text=">>" class="pagination-lg">
            </pagination>

        </div>

Step 7

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

 Also, check the sorting and paging.

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.