RA JSON DB Admin Dashboard - Documentation

Developed by Roberto Aleman, ventics.com

This is a minimal web-based tool built with HTML5 and JavaScript to manage data stored in a JSON file. It allows you to view, add, edit, and delete records (in this case, product information) within a JSON database directly in your web browser.

Do you need advice to implement an IT project, develop an algorithm to solve a real-world problem in your business, factory, or company? Write me right now and I'll advise you.

Getting Started

1. Download the Files: Save the following code snippets into two separate files in the same directory:

   • index.html (for the HTML structure)
   • script.js (for the JavaScript logic)

2. Open in Browser: Open the index.html file in your preferred web browser (Google Chrome, Mozilla Firefox, Safari, etc.).

Using the JSON DB Admin Dashboard

1. Selecting the JSON Data File

• Click "Choose File": At the top of the page, you will see a section labeled "Select JSON File:". Click on the "Choose File" button.

• Browse and Select: A file dialog will appear. Navigate to the location of your JSON data file (e.g., productos.json) and select it. Ensure your JSON file has the following structure:

  JSON

  {
    "productos": [
      {
        "id": 1,
        "name": "Product Name",
        "description": "Product Description",
        "price": 10.00,
        "stock": 100
      },
      // ... more product objects
    ]
  }
  

• Data Loaded: Once the file is selected, the product data from your JSON file will be loaded and displayed in the "Lista de Productos" (Product List) table below.

2. Viewing the Product List

• The "Lista de Productos" table will display all the products loaded from the JSON file.
• Each row in the table represents a product and shows its:
  • ID: The unique identifier of the product.
  • Nombre (Name): The name of the product.
  • Descripción (Description): A brief description of the product.
  • Precio (Price): The price of the product.
  • Stock: The current stock level of the product.
  • Acciones (Actions): Buttons to "Editar" (Edit) and "Borrar" (Delete) the product.

3. Adding a New Product

• Navigate to "Agregar Nuevo Producto" (Add New Product): Above the product list, you'll find a form with input fields for the product details.
• Fill in the Details: Enter the following information for the new product:
  • Nombre (Name): The name of the new product (required).
  • Descripción (Description): A description of the new product (optional).
  • Precio (Price): The price of the new product (required, must be a number).
  • Stock: The initial stock level of the new product (required, must be a whole number).
• Click "Agregar Producto" (Add Product): Once you have filled in all the required fields, click the "Agregar Producto" button. The new product will be added to the product list displayed in the table.

4. Editing an Existing Product

• Locate the Product: Find the product you want to edit in the "Lista de Productos" table.
• Click "Editar" (Edit): In the "Acciones" column of the corresponding row, click the "Editar" button.
• Form Populated: The form under "Agregar Nuevo Producto" will be automatically filled with the details of the selected product.
• Modify Details: Make the necessary changes to the product's name, description, price, or stock in the input fields.
• Click "Guardar Edición" (Save Edit): The "Agregar Producto" button will have changed to "Guardar Edición". Click this button to save your changes. The product list in the table will be updated with the modified information.

5. Deleting a Product

• Locate the Product: Find the product you want to delete in the "Lista de Productos" table.
• Click "Borrar" (Delete): In the "Acciones" column of the corresponding row, click the "Borrar" button.
• Confirmation: A confirmation dialog will appear asking if you are sure you want to delete the product. Click "OK" to proceed with the deletion or "Cancel" to abort.
• Product Removed: If you click "OK", the product will be removed from the product list in the table.

6. Saving Changes to the JSON File

• Click "Guardar Cambios" (Save Changes): After making any additions, edits, or deletions, click the "Guardar Cambios" button located below the "Agregar Nuevo Producto" form.
• File Download: Your browser will download a new JSON file. This file will have the same name as the original file you selected and will contain all the updated product data.
• Important: This tool operates within your browser and cannot directly overwrite the original file on your computer for security reasons. You will need to manually replace the original JSON file with the downloaded file if you want to persist the changes.

Code Structure

Here's a brief overview of the code files:

• index.html: Contains the HTML structure for the user interface, including the file selection, the product form, and the product list table. It also includes basic CSS for styling and links to the script.js file.
• script.js: Contains the JavaScript logic for:
  • Loading and parsing the JSON data from the selected file.
  • Displaying the products in the table.
  • Adding new products.
  • Editing existing products.
  • Deleting products.
  • Generating unique IDs for new products.
  • Downloading the updated JSON data as a file.

Important Considerations

• Local Operation: This tool runs entirely in your web browser. Your data is processed locally and is not sent to any external server.
• Saving Mechanism: Due to browser security restrictions, the tool downloads the modified JSON data. It does not directly save changes to the original file on your system.
• Error Handling: Basic error handling is included for JSON parsing. More robust error handling and input validation could be added for a production environment.
• Concurrency: This tool is not designed for concurrent access by multiple users. If multiple users try to modify the same JSON file simultaneously through this tool, data inconsistencies may occur.
• Scalability: For very large JSON files, performance might be affected as the entire file is loaded into the browser's memory.