JSON Array CRUD Operations
C => Create /Insert
R => Read
U => Update
D => Delete
foreach loop => It fetch the data row wise
Array.forEach(function(d,i){
===================================================================================
============================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
let EmployeeData = [];
let index = -1;
function AddEmployee() {
let empid = document.getElementById("txtempid").value;
let n= document.getElementById("txtname").value;
let m = document.getElementById("txtmobile").value;
let e= document.getElementById("txtemail").value;
let d = document.getElementById("txtdesignation").value;
let emp = { "eid": empid, "name": n, "mobile": m, "email": e,
"designation": d };
EmployeeData.push(emp);
console.log(EmployeeData);
DisplayData();
ClearData();
function DisplayData() {
let data = "";
EmployeeData.forEach(function (d, i) {
data += "<tr><td>" + d.eid + "</td><td>" + d.name + "</td><td>" +
d.mobile + "</td><td>" + d.email + "</td><td>" + d.designation
+ "</td><td>" + "<input type='button' onclick='EditData(" + i +
")' value='Edit'/>"
+ "<input type='button' onclick='DeleteData(" + i + ")'
value='Delete'/>" + "</td></tr>";
})
document.getElementById("tbldata").innerHTML = data;
}
function EditData(p) {
index = p;
let e = EmployeeData[p];
document.getElementById("txtempid").value = e.eid;
document.getElementById("txtname").value = e.name;
document.getElementById("txtmobile").value = e.mobile;
document.getElementById("txtemail").value = e.email;
document.getElementById("txtdesignation").value = e.designation;
function ClearData() {
document.getElementById("txtempid").value="";
document.getElementById("txtname").value="";
document.getElementById("txtmobile").value="";
document.getElementById("txtemail").value="";
document.getElementById("txtdesignation").value="";
function UpdateEmployee() {
let empid = document.getElementById("txtempid").value;
let n = document.getElementById("txtname").value;
let m = document.getElementById("txtmobile").value;
let e = document.getElementById("txtemail").value;
let d = document.getElementById("txtdesignation").value;
let emp = { "eid": empid, "name": n, "mobile": m, "email": e,
"designation": d };
EmployeeData[index] = emp;
DisplayData();
ClearData();
function DeleteData(d) {
EmployeeData.splice(d, 1);
DisplayData();
</script>
</head>
<body>
<table border="1">
<tr>
<th>Employee ID</th>
<td><input type="text" id="txtempid" /></td>
</tr>
<tr>
<th>Name</th>
<td><input type="text" id="txtname" /></td>
</tr>
<tr>
<th>Mobile</th>
<td><input type="text" id="txtmobile" /></td>
</tr>
<tr>
<th>Email</th>
<td><input type="text" id="txtemail" /></td>
</tr>
<tr>
<th>Designation</th>
<td><input type="text" id="txtdesignation" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="AddEmployee"
onclick="AddEmployee()" />
<input type="button" value="UpdateEmployee"
onclick="UpdateEmployee()" />
</td>
</tr>
</table>
<hr />
<table border="1">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Designation</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbldata"></tbody>
</table>
</body>
</html>
