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

Today, in this article, I will explain performing CRUD operations in AngularsJS. In my previous article, I have shown how to retrieve records from JSON file with sorting and paging. Now, I will explain how to Insert, Update, and Delete data in Angular.js with required field validation. So, let us go through step by step.

Part1: We have seen retrieval of records from JSON file in the previous part. Check this link for that.

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

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

Step 1

We have already created app.js and service file in JS.

AngularJS

Step2

We will go to service.js file and write the service code for Insert, Update, Delete operations.

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;
},
getById: function (url, object) {
var promise = $http({
method: "POST",
url: url,
data: object
})
.success(function (data, status) {
return data;
})
.error(function (data, status) {
return { "status": false };
});
return promise;
},
add: function (url, object) {
var promise = $http({
method: "POST",
url: url,
data: object
})
.success(function (data, status) {
return data;
})
.error(function (data, status) {
return { "status": false };
});
return promise;
},
edit: function (url, object) {
var promise = $http({
method: "POST",
url: url,
data: object
})
.success(function (data, status) {
return data;
})
.error(function (data, status, headers) {
return { "status": false };
});
return promise;
},
del: function (url, object) {
var promise = $http({
method: "POST",
url: url,
data: object
})
.success(function (data, status) {
return data;
})
.error(function (data, status) {
return { "status": false };
});
return promise;
}
}
}]);

Step 3

Now, let's go to app.js and write two directives - The first one is for reading the pictures while we upload that. And, the second one is for performing the required filed validation while uploading the picture.

(function () {
AngularExample.directive("fileread", [function () {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.fileread = loadEvent.target.result;
});
}
var value = changeEvent.target.files[0].name;
reader.readAsDataURL(changeEvent.target.files[0]);
$("#txtImage").val(value);
});
}
}
}]);
})();

And another directive,

//Required field Validation of the all pages
AngularExample.directive('showErrors', function ($timeout) {
return {
restrict: 'A',
require: '^form',
link: function (scope, el, attrs, formCtrl, $invalid) {
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box
var inputName = inputNgEl.attr('name');
// only apply the has-error class after the user leaves the text box
var blurred = false;
inputNgEl.bind('blur', function () {
blurred = true;
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$watch(function () {
if (formCtrl[inputName] && formCtrl[inputName] != null) {
return formCtrl[inputName].$invalid
}
}, function (invalid) {
if (!blurred && invalid) { return }
el.toggleClass('has-error', invalid);
});
scope.$on('show-errors-check-validity', function () {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$on('show-errors-reset', function () {
$timeout(function () {
el.removeClass('has-error');
}, 0, false);
});
}
}
});

Step 4

Now, we will go to EmployeesController and write the insert and update related code.

$scope.submit = function () {
if ($scope.FormPostType == "edit") {
$index = $scope.Employees.Employees.indexOf(filterFilter($scope.Employees.Employees, { id: $scope.employee.id })[0])
alert($index);
$scope.Employees.Employees[$index] = angular.copy($scope.employee);
$('#myModal').modal('hide');
$(".commontext").removeClass('has-error');
}
else {
$(".commontext").removeClass('has-error');
$scope.employee.id = $scope.generateId();
$scope.employee.image = $('#txtImage').val();
$scope.Employees.Employees.push($scope.employee);
$('#myModal').modal('hide');
$(".commontext").removeClass('has-error');
}
$scope.totalItems = $scope.Employees.Employees.length;
};
//method to generate ID
$scope.generateId = function () {
var date = new Date();
$scope.second = ((date.getSeconds() < 10 ? '0' : '') + date.getSeconds());
$scope.randomnumber = Math.floor((Math.random() * 6) + 50);
return parseFloat($scope.randomnumber) + parseFloat($scope.second);
};

In the above code, I wrote both theinsert and update code according to the condition.

Step 5

Now, we will go to our HTML file and write the code or design for opening the popup.

<div class="modal fade modalcompetition " id="myModal" role="dialog">
<form ng-submit="submit()" name="CreateEmployee">
<div class="modal-dialog btn-info">
<div class="modal-content btn-primary">
<div class="modal-header btn-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title right-data">Create/Edit Employee</h4>
</div>
<div class="modal-body btn-primary">
<input type="hidden" ng-model="employee.id" />
<div class="row">
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="lblFirstName" class="right-data">First Name</label>
<input type="text" name="firstName" id="txtFirstName" ng-model="employee.firstName" class="form-control" required />
</div>
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="name" class="right-data">Address</label>
<input type="text" class="form-control" ng-model="employee.address" placeholder="Employee Address" required />
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="exampleSelect1" class="right-data">Last Name</label>
<input type="text" name="lastName" id="txtLastName" ng-model="employee.lastName" class="form-control date-input calendar" required />
</div>
<div class="col-md-6 commontext modal-logo-padding" show-errors>
<label class="right-data">Photo</label><br />
<input type="file" id="fileUpload" name="filepath" ng-model="employee.image" fileread="employee.image" accept="image/*" multiple app-filereader class="custom-file-upload-hidden" >
<span class="file-upload-button">{{Browse}}</span>
<input type="text" id="txtImage" ng-model="employee.image" class="file-upload-input right-data form-control" readonly />
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="exampleSelect1" class="right-data">Birth Date</label>
<input type="text" name="txtDateOfBirth" id="dateOfBirth" ng-bind="employee.dateOfBirth" ng-model="employee.dateOfBirth" class="form-control" required />
</div>
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="exampleSelect1" class="right-data">Email Id</label>
<input type="text" name="emailId" id="txtEmailId" ng-bind="employee.emailId" ng-model="employee.emailId" class="form-control" required />
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 commontext" show-errors>
<label for="exampleSelect1" class="right-data">Phone Number</label>
<input type="text" name="phoneNumber" id="txtPhone" ng-model="employee.phoneNo" class="form-control date-input" required />
</div>
</div>
</div>
<div class="footer btn-primary">
<input type="submit" class="btn btn-default" ng-click="save()" value="Save" />
<button class="btn btn-default" data-dismiss="modal" ng-click="reset()">Cancel</button>
</div>
</div>
</div>
</form>
</div>
//This belove code for use date picker in birthdate
<script>
$("#dateOfBirth").datetimepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
format: 'Y/m/d',
timepicker: false
});
</script>

Also, we have to write the HTML code for Add, Edit, and Delete buttons.

<span class="col-lg-2"><a href="" data-toggle="modal" data-target="#myModal" ng-click="addEmployee('add')" class="icon-plus">Add New Employee</a></span>
<span class="col-lg-2"><a ng-disabled="disableEdit()" class="icon-pencil" data-toggle="modal" data-target="#myModal" ng-click="editEmployee('edit')" value="Edit Employee">Edit Employee</a></span>
<span class="col-lg-2"><a class="deleteicon" ng-disabled="disableDelete()" value="Delete Employee" ng-model="selected" ng-click="remove()">Delete Employee</a></span>

AngularJS

Now, let's see our design.

AngularJS

See the output after clicking "Save".

AngularJS

Step 6

Now, we will perform Edit operations. For this, I am using checkbox. Just check the checkbox and click Edit button. Here, we have already given the option that you have to update only one record at a time.

But before that, we have to write the code for selecting the checkbox.

//check/uncheck record checkbox and 'selectall' checkbox
$scope.UnCheckMain = function () {
var result = 0;
var items = 0;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i]) {
var items = items + 1;
if ($scope.Employees.Employees[i].selected) {
var result = result + 1;
}
}
}
if (result && result == items) {
$scope.selectedAll = true;
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
items = 0;
result = 0;
} else {
$scope.selectedAll = false;
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
items = 0;
result = 0;
}
$scope.disableEdit();
};
//check/uncheck 'SelectAll' Checkbox
$scope.checkAll = function () {
if ($scope.pageArray && $scope.pageArray.length > 0) {
$scope.checkcurrentpage = [];
$scope.checkcurrentpage = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (($scope.checkcurrentpage && $scope.checkcurrentpage.length > 0)) {
$scope.selectedAll = $scope.checkcurrentpage[0].selected;
if ($scope.checkcurrentpage[0].selected) {
event.target.value = 1;
}
else {
event.target.value = 0;
}
}
else {
event.target.value = 0;
}
}
if (event.target.value == 0) {
$scope.selectedAll = true;
event.target.value = 1;
}
else {
$scope.selectedAll = false;
event.target.value = 0;
}
for (var i = $scope.begin; i < $scope.end; i++) {
if ($scope.Employees.Employees[i]) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.Employees.Employees[$index].selected = $scope.selectedAll;
}
}
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
};

In the above code, I used all the code related to checkbox.

We check or uncheck
We select on header check box then all check box automatic check
Any Uncheck on data row check box the header automatically uncheck
Here is paging so we can check or uncheck only the current page. It does affect some other pages.

Now, we have to write to open the edit records option according to Employee number.

//Take a copy of record to edit in model pop-up
$scope.editEmployee = function (postType) {
$scope.errMessageCurrDate = '';
$scope.errMessage = '';
$scope.FormPostType = postType;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.employee = angular.copy($scope.Employees.Employees[$index]);
}
}
}

Now, we will go to our HTML page and add the code for editing in EmployeeController.js.

//Take a copy of record to edit in model pop-up
$scope.editEmployee = function (postType) {
$scope.errMessageCurrDate = '';
$scope.errMessage = '';
$scope.FormPostType = postType;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.employee = angular.copy($scope.Employees.Employees[$index]);
}
}
}
//Enable or desable of edite button
$scope.disableEdit = function () {
var result = 0;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
var result = result + 1;
}
}
if (result && result == 1) {
$('.icon-pencil').addClass('checked');
$('.icon-pencil').removeClass('anchordisabled');
result = 0;
return false;
} else {
$('.icon-pencil').removeClass('checked');
$('.icon-pencil').addClass('anchordisabled');
result = 0;
return true;
}
};

Now, let's add code for generating checkbox in HTML file.

First, we will add a checkbox in header part.

<th id="checkClass">
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>

Second, we will add a check box in row part.

<td><input type="checkbox" ng-model="employee.selected" ng-checked="employee.selected" ng-click="UnCheckMain()" /></td>

AngularJS

After that, see the result.

AngularJS

Step 7

Now, we have to perform the Delete operation. For this, let's go to EmployeeController.js file and write the code.

//Deactivate selected/all Employee
$scope.remove = function () {
if (confirm("Are you sure to Delete ?")) {
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.Employees.Employees.splice($index, 1);
}
};
$scope.totalItems = $scope.Employees.Employees.length;
}
};

After that, just click the Delete button in UI and select the checkbox of the row we have to delete. We can also delete multiple rows at a time.

AngularJS

After that, click OK. In the last, I am giving the code of whole Controller part and the complete stylesheet of the design as well.

EmployeeController.js

AngularExample

.controller("EmployeeController", ['$scope', 'Service', 'MyService','filterFilter','config', function ($scope, Service, MyService,filterFilter, config) {
$scope.data = [];
$scope.Employees = [];
$scope.employee = {};
$scope.FormPostType;
//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) {
if ($scope.pageArray && $scope.pageArray.length > 0) {
$scope.checkcurrentpage = [];
$scope.checkcurrentpage = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (($scope.checkcurrentpage && $scope.checkcurrentpage.length > 0)) {
$scope.selectedAll = $scope.checkcurrentpage[0].selected;
}
else {
$scope.selectedAll = false;
}
}
$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);
};
});
//check/uncheck record checkbox and 'selectall' checkbox
$scope.UnCheckMain = function () {
var result = 0;
var items = 0;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i]) {
var items = items + 1;
if ($scope.Employees.Employees[i].selected) {
var result = result + 1;
}
}
}
if (result && result == items) {
$scope.selectedAll = true;
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
items = 0;
result = 0;
} else {
$scope.selectedAll = false;
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
items = 0;
result = 0;
}
$scope.disableEdit();
};
//Add new Record / Save Edited Records
$scope.submit = function () {
if ($scope.FormPostType == "edit") {
$index = $scope.Employees.Employees.indexOf(filterFilter($scope.Employees.Employees, { id: $scope.employee.id })[0])
alert($index);
$scope.Employees.Employees[$index] = angular.copy($scope.employee);
$('#myModal').modal('hide');
$(".commontext").removeClass('has-error');
}
else {
$(".commontext").removeClass('has-error');
$scope.employee.id = $scope.generateId();
$scope.employee.image = $('#txtImage').val();
$scope.Employees.Employees.push($scope.employee);
$('#myModal').modal('hide');
$(".commontext").removeClass('has-error');
}
$scope.totalItems = $scope.Employees.Employees.length;
};
//check/uncheck 'SelectAll' Checkbox
$scope.checkAll = function () {
if ($scope.pageArray && $scope.pageArray.length > 0) {
$scope.checkcurrentpage = [];
$scope.checkcurrentpage = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (($scope.checkcurrentpage && $scope.checkcurrentpage.length > 0)) {
$scope.selectedAll = $scope.checkcurrentpage[0].selected;
if ($scope.checkcurrentpage[0].selected) {
event.target.value = 1;
}
else {
event.target.value = 0;
}
}
else {
event.target.value = 0;
}
}
if (event.target.value == 0) {
$scope.selectedAll = true;
event.target.value = 1;
}
else {
$scope.selectedAll = false;
event.target.value = 0;
}
for (var i = $scope.begin; i < $scope.end; i++) {
if ($scope.Employees.Employees[i]) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.Employees.Employees[$index].selected = $scope.selectedAll;
}
}
var currentpageid = filterFilter($scope.pageArray, { currentPage: $scope.currentPage });
if (currentpageid.length <= 0 || currentpageid == null) {
$scope.pageArray.push({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
else {
$index = $scope.pageArray.indexOf(filterFilter($scope.pageArray, { currentPage: $scope.currentPage })[0])
$scope.pageArray[$index] = angular.copy({ currentPage: $scope.currentPage, selected: $scope.selectedAll });
}
};
//method to generate ID
$scope.generateId = function () {
var date = new Date();
$scope.second = ((date.getSeconds() < 10 ? '0' : '') + date.getSeconds());
$scope.randomnumber = Math.floor((Math.random() * 6) + 50);
return parseFloat($scope.randomnumber) + parseFloat($scope.second);
};
//Add new record using model pop-up
$scope.addEmployee = function (postType) {
if ($(".commontext").hasClass('has-error')) {
$(".commontext").removeClass('has-error');
}
$scope.errMessageCurrDate = '';
$scope.errMessage = '';
$scope.FormPostType = postType;
$scope.employee = {};
};
$scope.save = function () {
$scope.$broadcast('show-errors-check-validity');
};
//Enable/Disable Edit Button on Checkbox Checked
//Take a copy of record to edit in model pop-up
$scope.editEmployee = function (postType) {
$scope.errMessageCurrDate = '';
$scope.errMessage = '';
$scope.FormPostType = postType;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.employee = angular.copy($scope.Employees.Employees[$index]);
}
}
}
//Enable or desable of edite button
$scope.disableEdit = function () {
var result = 0;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
var result = result + 1;
}
}
if (result && result == 1) {
$('.icon-pencil').addClass('checked');
$('.icon-pencil').removeClass('anchordisabled');
result = 0;
return false;
} else {
$('.icon-pencil').removeClass('checked');
$('.icon-pencil').addClass('anchordisabled');
result = 0;
return true;
}
};
//Enable/Disable Delete Button on Checkbox Checked
$scope.disableDelete = function () {
var result = 0;
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
var result = result + 1;
}
}
if (result && result >= 1) {
$('.deleteicon').addClass('checked');
$('.deleteicon').removeClass('anchordisabled');
result = 0;
return false;
} else {
$('.deleteicon').removeClass('checked');
$('.deleteicon').addClass('anchordisabled');
result = 0;
return true;
}
};
//Deactivate selected/all Employee
$scope.remove = function () {
if (confirm("Are you sure to Delete ?")) {
for (var i = $scope.end - 1; i >= $scope.begin; i--) {
if ($scope.Employees.Employees[i] && $scope.Employees.Employees[i].selected) {
$index = $scope.Employees.Employees.indexOf($scope.Employees.Employees[i]);
$scope.Employees.Employees.splice($index, 1);
}
};
$scope.totalItems = $scope.Employees.Employees.length;
}
};
}]);

Site.cs

body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.anchordisabled{
cursor: not-allowed;
pointer-events: none;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
/*.modal-logo-padding{
padding-top:30px;
}*/
.right-data{
padding: 2px 0px !important;
padding-right:20px;
}
.custom-file-upload-hidden {
position: absolute;
z-index: 999;
width: 88%;
height: 100%;
direction: ltr;
opacity: 0;
}
.file-upload-input{
top: -40px;
position: relative;
text-align:right;
}
.right-data{
padding: 2px 0px !important;
padding-right:20px;
}
.file-upload-button {
cursor: pointer;
height:34px;
padding:8px 20px;
display: inline-block;
color: #fff;
border: none;
position: absolute;
left: 28px;
background-color: #b3b3b3;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.file-upload-button{
position: relative;
display: inline-block;
padding: 9px 9px;
left: 0;
height: 36px;
width: 96px;
}

Conclusion

In this article, we saw how to perform CRUD operations in Angular JS using JSON file. I hope you liked it. If you have a query related to this, just comment below. You can download the whole project from the attachment.