Accessing Data from a database and performing crud operation is an important step of any programming language.
Sometimes in our application, we need to perform insert, update and delete records(crud) in a Table using inline editing with the edit and delete icon. So in this example, we are going to create an HTML page. In which we will show the list of users using Json and then we will perform the crud operation in that using Json data.
let’s do that step by step.
In this, we will discuses the below point
- CRUD operation in JavaScript with validation
- Pure JavaScript CRUD operations with HTML
- CRUD operations using JSON in JavaScript
CRUD operations using JSON in JavaScript
In this post We will try to create a basic page where Users can see all the lists of records in a Table using json data with add button for adding new records in the table, edit button for updating existing records and delete button to delete any existing records from Json data and table. before adding the record in the Json array we are also performing the validation.
Html page
<!DOCTYPE html>
<html>
<head>
<title>CRUD operations using JSON in JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="container">
<h1>CRUD operations using JSON in JavaScript</h1>
<br />
<table class="table">
<thead>
<tr>
<th>CustomerId</th>
<th>CustomerName</th>
<th>CustomerEmail</th>
<th>Address</th>
</tr>
</thead>
<tbody id="tblbody">
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//json array
var customerArray = [
{
"id": 119447,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119443,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119437,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119428,
"customer_name": "Maduwantha",
"customer_email": "[email protected]",
"address": "CAN"
},
{
"id": 119422,
"customer_name": "dhruvi",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119421,
"customer_name": "hasti",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119411,
"customer_name": "asdf",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119409,
"customer_name": "csd",
"customer_email": "[email protected]",
"address": "csd"
},
{
"id": 119385,
"customer_name": "asd",
"customer_email": "[email protected]",
"address": "asd"
}
]
//bind json data to html table
bindjsondata();
function bindjsondata() {
document.getElementById('tblbody').innerHTML = "";
//iterate through each object in Json array and create row
customerArray.forEach(function (item, index) {
var btnEditId = "btnedit" + item.id;
var btnDeleteId = "btndelete" + item.id;
var tableRow = "<tr Id='" + item.id + "' data-CustomerID='" + item.id + "' data-CustomerName='" + item.customer_name + "' data-email='" + item.customer_email + "' data-Address='" + item.address + "'>"
+ "<td class='td-data'>" + item.id + "</td>"
+ "<td class='td-data'>" + item.customer_name + "</td>"
+ "<td class='td-data'>" + item.customer_email + "</td>"
+ "<td class='td-data'>" + item.address + "</td>"
+ "<td class='td-data'>" +
"<button id='" + btnEditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + item.id + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
"<button id='" + btnDeleteId + "' class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteCustomerRow(" + item.id + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
+ "</td>"
+ "</tr>";
document.getElementById('tblbody').innerHTML += tableRow;
})
//add tr for adding record in the table at the bottom
var AddRow = "<tr>"
+ "<td class='td-data'></td>"
+ "<td class='td-data'><input type='text' id='txtCustomerName' placeholder='name..'></td>"
+ "<td class='td-data'><input type='email' id='txtemail' placeholder='email..'></td>"
+ "<td class='td-data'><input type='text' id='txtAddress' placeholder='address..'></td>"
+ "<td class='td-data'>" + "<button id= 'btnaddCustomer' onclick='addCustomer()' class='btn btn-success'> <i class='fa fa-plus-circle' aria-hidden='true'></i>Add</button>"+"</td>"
+ "</tr>";
document.getElementById('tblbody').innerHTML += AddRow;
}
function CreateUniqueCustomerID() {
//generate Unique number for Id
const ID = Date.now();
return ID;
}
function addCustomer() {
var customerID = CreateUniqueCustomerID();
var customerName = document.getElementById("txtCustomerName").value;
if (!customerName) {
alert('Please enter name!')
return false;
}
var email = document.getElementById("txtemail").value;
if (!email) {
alert('Please enter email!')
return false;
}
var emailfilter = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!emailfilter.test(email)) {
alert('Please enter a valid email address!');
return false;
}
var address = document.getElementById("txtAddress").value;
if (!address) {
alert('Please enter address!')
return false;
}
//creating object and push to json array
customerArray.push({
"id": customerID,
"customer_name": customerName,
"customer_email": email,
"address": address
});
document.getElementById('txtCustomerName').value = "";
document.getElementById('txtemail').value = "";
document.getElementById('txtAddress').value = "";
bindjsondata();
};
function showEditRow(CustomerID) {
//select tr of whose button was clicked
var CustomerRow = document.getElementById(CustomerID);
//returns array of all elements with class "row-data" in CustomerRow
var data = CustomerRow.querySelectorAll(".td-data");
var customerID = data[0].innerHTML;
var customerName = data[1].innerHTML;
var customeremail = data[2].innerHTML;
var address = data[3].innerHTML;
data[0].innerHTML = '<input name="txtupdate_CustomerID" disabled id="txtupdate_CustomerID" value="' + customerID + '"/>';
data[1].innerHTML = '<input name="txtupdate_CustomerName" id="txtupdate_CustomerName" value="' + customerName + '"/>';
data[2].innerHTML = '<input name="txtupdate_email" id="txtupdate_email" value="' + customeremail + '"/>';
data[3].innerHTML = '<input name="txtupdate_Address" id="txtupdate_Address" value="' + address + '"/>';
data[4].innerHTML =
"<button class='btn btn-primary btn-xs btn-updateCustomer' onclick='updateCustomers(" + customerID + ")'>" +
"<i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
+ "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancelUpdate(" + customerID + ")'><i class='fa fa-times' aria-hidden='true'></i>Cancel</button>"
+ "<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteCustomerRow(" + customerID + ")'>"
+ "<i class='fa fa-trash' aria-hidden='true'></i>Delete</button>"
}
function cancelUpdate(CustomerID) {
var btneditId = "btnedit" + CustomerID;
var btndeleteId = "btndelete" + CustomerID;
//select tr of whose button was clicked
var CustomerRow = document.getElementById(CustomerID);
var data = CustomerRow.querySelectorAll(".td-data");
var customerName = CustomerRow.getAttribute("data-CustomerName");
var address = CustomerRow.getAttribute("data-Address");
var email = CustomerRow.getAttribute("data-email");
data[0].innerHTML = CustomerID;
data[1].innerHTML = customerName;
data[2].innerHTML = email;
data[3].innerHTML = address;
var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + CustomerID + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
"<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteCustomerRow(" + CustomerID + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
data[4].innerHTML = actionbtn;
}
function deleteCustomerRow(CustomerID) {
//remove object from json array
customerArray.splice(customerArray.findIndex(a => a.id === CustomerID), 1)
bindjsondata();
}
function updateCustomers(CustomerID) {
//select tr of whose button was clicked
var CustomerRow = document.getElementById(CustomerID);
var data = CustomerRow.querySelectorAll(".td-data");
var customerName = data[1].querySelector("#txtupdate_CustomerName").value;
var email = data[2].querySelector("#txtupdate_email").value;
var address = data[3].querySelector("#txtupdate_Address").value;
//Updating json object using filter
var customerObJ = customerArray.filter((x) => x.id == CustomerID).pop();
if (customerObJ != null) {
customerObJ.customer_name = customerName;
customerObJ.customer_email = email;
customerObJ.address = address;
}
bindjsondata();
}
</script>In this, above we have taken a JSON array that contains an array of objects. JSON object has the id,customer_name,customer_email, and address keys.
Json array
var customerArray = [
{
"id": 119447,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119443,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119437,
"customer_name": "Qa",
"customer_email": "[email protected]",
"address": "USA"
},
{
"id": 119428,
"customer_name": "Maduwantha",
"customer_email": "[email protected]",
"address": "CAN"
},
{
"id": 119422,
"customer_name": "dhruvi",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119421,
"customer_name": "hasti",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119411,
"customer_name": "asdf",
"customer_email": "[email protected]",
"address": "usa"
},
{
"id": 119409,
"customer_name": "csd",
"customer_email": "[email protected]",
"address": "csd"
},
{
"id": 119385,
"customer_name": "asd",
"customer_email": "[email protected]",
"address": "asd"
}
]On page load, we bind each JSON array into the HTML table with add, edit, and delete icon.Click on edit icon we are converting the table row into editable row with cancel and update option. so that user can also cancel the action.and onclick of update button we are updating json object using filter function.
JSON Data: A JSON array named customerArray is defined containing customer information such as id, name, email, and address.
Bind JSON Data to Table: The bindjsondata function populates the table with data from the customerArray.It iterates through each object in the JSON array and dynamically creates table rows with customer data.Edit and delete buttons are provided for each customer row.
Add Customer Functionality:
The addCustomer function adds a new customer to the JSON array based on user input from text fields for name, email, and address.It performs basic validation to ensure all fields are filled and that the email is valid.
Edit Customer Functionality:
The showEditRow function is called when the edit button for a specific customer row is clicked.
It replaces the row's data with input fields pre-filled with the existing customer information, allowing the user to edit.Update, cancel, and delete buttons are provided for each row during editing.
Update Customer Functionality:
The updateCustomers function updates the customer's information in the JSON array based on the edited values.It retrieves the edited values from the input fields and updates the corresponding customer object.
Cancel Edit and Delete Functionality:
The cancelUpdate function cancels the edit operation for a specific customer row and restores the original data.
The deleteCustomerRow function removes a customer from the JSON array when the delete button is clicked.
This page provides a user interface for managing customer data, allowing users to add, edit, and delete customer records, with changes reflected in the displayed table.
Read more article
- [Simple Way]-JavaScript Edit table row Using Popup
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- How to edit/delete selected row from HTML table using JavaScript
- [Simple Trick]-Hide Points in ChartJS Line Graph
- [Simple Trick]-How to Hide Some Points in ChartJS
- How to leave just points without lines in ChartJS
In the present time, everybody is stressed over their vocation and everybody likewise needs that he ought to be at the level of his profession. For this, we really want the correct heading and course, yet it is more at when we are in our tutoring life.
Be that as it may, presently we are searching for courses in which we can lay out our best profession. For this, we are acquainting you with such a superior profession choices course, whose activity is expanding step by step. Web Designing in Hindi course is the most done course in the present time.
By following through with this tasks, you might not just make a decent profession choice at any point yet additionally bring in great cash.
The vast majority like to go about responsibilities in Government Sector or Private Sector, yet you can set up a decent foundation for yourself by taking a website composition course.
Web Designing In Hindi, there is a course of planning a site page of a site, in which numerous specialized terms are utilized, this cycle is called website composition.
As such, putting together website pages, content, content creation, content plan, page format, illustrations plan, and so on is called website architecture and it is likewise called the web advancement configuration process in specialized terms.
Any site or page is made with the assistance of HyperText Markup Language, whose truncation is HTML, it is a PC programming language whose design is through coding. Website specialists do a wonderful web architecture course utilizing HTML language to do website composition.
website composition assessment
A large portion of the sites are made with HTML and CSS which works Smoothly on the Browser.
As To Create New Website, Manage Graphics Design, Page Structure, Internal Designing of Website, Content Production, Site Maintenance, and so on. Which is a significant piece of it, which is instructed under the website composition course.
Read Similar Articles
- [Solved]-How to format Date Object in MM/DD/YYYY HH:MM:SS format using JavaScript ?
- How To Edit/Delete Selected Row From HTML Table Using JavaScript
- How To Pass Parameters in AJAX POST? | JQuery Ajax Post Json Example
- [Simple Way]-JavaScript Edit Table Row Using Popup
- jQuery Ajax GET Example with Parameters
- [Simple Way]-Add/Delete Table Rows Dynamically Using JavaScript
- [Best Way]-How To Display JSON Data In HTML Using Ajax