How to read the previously stored array, if there are any.
Is adding the object to the array working in this code?
Store/update the array in localStorage, is this task being run or not properly? I'm getting confused
What I have tried:
<!DOCTYPE html>
<html>
<head>
<title>Converting JSON Data to HTML Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
th,
td,
p,
input {
font: 14px Verdana;
}
table,
th,
td {
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="CreateTableFromJSON()">
<div class="col s4">
<div class="container blue card">
<h2>Input Form</h2>
</div>
<form class="container card">
<p>
<label>Name</label>
<input class="input" type="text" id="first_name" />
</p>
<p>
<label>Date Of Birth</label>
<input class="input" type="text" id="date_of_birth" />
</p>
<p>
<label>Email</label>
<input class="input" type="text" id="email" />
</p>
<p><button type="button" class="btn blue" id="save">Submit</button></p>
<input type="reset" value="Reset">
</form>
<br />
</div>
<p id="showData"></p>
</body>
<script>
let localData = localStorage.getItem("localData");
if (!localData) {
const data = {
cols: ["Serial No.", "Name", "Date Of Birth", "Email", "Action"],
rows: [
{
serial_no: "1",
name: "Amar",
date_of_birth: "01/01/1990",
email: "def@gmail.com",
},
{
serial_no: "2",
name: "Abhi",
date_of_birth: "30/10/1996",
email: "xyz@gmail.com",
},
{
serial_no: "3",
name: "Alex",
date_of_birth: "12/12/1999",
email: "abc@gmail.com",
},
],
};
localStorage.setItem("localData", JSON.stringify(data));
}
$("#save").on("click", function () {
var first_name = $("#first_name").val();
var date_of_birth = $("#date_of_birth").val();
var email = $("#email").val();
let data = getData();
if (first_name != "" && date_of_birth != "" && email != "") {
let item = {
serial_no: data.rows.length + 1,
name: first_name,
date_of_birth,
email,
};
data.rows.push(item);
UpdateLocalStorage(data);
CreateTableFromJSON();
}
});
function CreateTableFromJSON() {
let table = document.createElement("table");
let data = getData();
let tr = table.insertRow(-1);
for (let i = 0; i < data.cols.length; i++) {
var th = document.createElement("th");
th.innerHTML = data.cols[i];
tr.appendChild(th);
}
var th = document.createElement("th");
tr.appendChild(th);
for (let i = 0; i < data.rows.length; i++) {
tr = table.insertRow(-1);
let row = data.rows[i];
for (let key in row) {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = row[key];
}
let tabCell = tr.insertCell(-1);
tabCell.innerHTML =
'<input type="button" value="delete" onclick="deleteRow(this)" />';
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
function deleteRow(ele) {
let data = getData();
var rowCount = data.rows.length;
if (rowCount < 1) {
alert("There is no row available to delete!");
return;
}
if (ele) {
let row = $(ele).closest("tr");
let dataIndex = row.index() - 1;
ele.parentNode.parentNode.remove();
data.rows.splice(dataIndex, 1);
UpdateLocalStorage(data);
} else {
row.deleteRow(rowCount - 1);
}
}
function getData() {
return JSON.parse(localStorage.getItem("localData"));
}
function UpdateLocalStorage(data) {
localStorage.setItem("localData", JSON.stringify(data));
}
</script>
</html>