I need some guidance on transitioning from using localStorage to a server-side .json file for my inventory database system. SQL is not an option for this project, so I am looking to implement it using Javascript or jQuery. Despite searching online, I have yet to find any useful examples.
While JSON seems straightforward, I'm facing some challenges in this particular scenario. Fortunately, I have access to a hosted server where I can run the necessary code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Inventory System</h1>
<form id="inventoryForm">
<input type="text" id="itemOwner" placeholder="Technician's Name" required>
<input type="text" id="itemName" placeholder="Item Name" required>
<input type="number" id="itemQuantity" placeholder="Quantity" required>
<input type="number" id="itemPrice" placeholder="Price" required>
<button type="submit">Add Item</button>
</form>
<table id="inventoryTable">
<tr>
<th>Owner</th>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("inventoryForm");
const table = document.getElementById("inventoryTable");
const items = JSON.parse(localStorage.getItem("inventoryItems")) || [];
// Function to update and display the inventory table
function updateInventoryTable() {
table.innerHTML = `
<tr>
<th>Owner</th>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
</tr>
`;
items.forEach((item, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${item.owner}</td>
<td>${item.name}</td>
<td>${item.quantity}</td>
<td>${item.price}</td>
<td>
<button onclick="editItem(${index})">Edit</button>
<button onclick="deleteItem(${index})">Delete</button>
</td>
`;
table.appendChild(row);
});
}
// Function to add a new item to the inventory
function addItem(owner, name, quantity, price) {
items.push({owner, name, quantity, price });
localStorage.setItem("inventoryItems", JSON.stringify(items));
updateInventoryTable();
}
// Function to delete an item from the inventory
function deleteItem(index) {
items.splice(index, 1);
localStorage.setItem("inventoryItems", JSON.stringify(items));
updateInventoryTable();
}
// Function to handle form submission and add new items
form.addEventListener("submit", (e) => {
e.preventDefault();
const itemOwner = document.getElementById("itemOwner").value;
const itemName = document.getElementById("itemName").value;
const itemQuantity = document.getElementById("itemQuantity").value;
const itemPrice = document.getElementById("itemPrice").value;
addItem(itemOwner, itemName, itemQuantity, itemPrice);
form.reset();
});
// Function to edit an existing item in the inventory
window.editItem = (index) => {
const newOwner = prompt("Enter the new owner's name:");
const newName = prompt("Enter the new item name:");
const newQuantity = prompt("Enter the new quantity:");
const newPrice = prompt("Enter the new price:");
if (newOwner && newName && newQuantity && newPrice) {
items[index].owner = newOwner;
items[index].name = newName;
items[index].quantity = newQuantity;
items[index].price = newPrice;
localStorage.setItem("inventoryItems", JSON.stringify(items));
updateInventoryTable();
}
};
// Function to delete an item from the inventory
window.deleteItem = (index) => {
if (confirm("Are you sure you want to delete this item?")) {
deleteItem(index);
}
};
// Initialize the inventory table
updateInventoryTable();
});