Question

I am new to JSON and need some help changing the code to utilize a server-side .json file rather than localStorage.

This is for a simple inventory database I require and should not use SQL. Javascript or jQuery would be best. I have searched the web without any helpful examples.

JSON seems easy enough, but I’m stumped here. I do have a hosted server that would allow me to run this.

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="Technicians 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 owners 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();
});

Change JSON code from localStorage to server-side

LEAVE A COMMENT Hủy