Problem with loading JSON file into IndexedDB through javascript

Question

So I need to load this file into IndexedDB called Admin.json and these are the contents of it:

[
 {"username": "sheilah", "password": "sheilah123"},
 {"username": "joella", "password": "joella123"},
 {"username": "roselin", "password": "roselin123"},
 {"username": "rozalin", "password": "rozalin123"},
 {"username": "melisse", "password": "melisse123"},
 {"username": "berny", "password": "berny123"},
 {"username": "bink", "password": "bink123"},
 {"username": "vaughn", "password": "vaughn123"},
 {"username": "elmira", "password": "elmira123"},
 {"username": "roddie", "password": "roddie123"}
]

So I have written this code for it in my js file:

let db;

function openDatabase() {
  const request = indexedDB.open('HospitalDB', 1); // Open database with version 1

  request.onupgradeneeded = function(event) {
    db = event.target.result;

    // Create an object store for 'admins' if it doesn't exist
    if (!db.objectStoreNames.contains('admins')) {
      const store = db.createObjectStore('admins', {
        keyPath: 'username'
      }); // 'username' as the unique key
      store.createIndex('password', 'password', {
        unique: false
      }); // Create an index on 'password'
    }
    console.log("Database created/updated successfully!");

    // Create an object store for 'patients' if it doesn't exist
    if (!db.objectStoreNames.contains('patients')) {
      db.createObjectStore('patients', {
        keyPath: 'id'
      });
    }

    // Create an object store for 'medicines' if it doesn't exist
    if (!db.objectStoreNames.contains('medicines')) {
      db.createObjectStore('medicines', {
        keyPath: 'id'
      });
    }
  }

  request.onsuccess = function(event) {
    db = event.target.result;
    console.log("Database opened successfully!");

    // Call the function to load and insert the admin data
    loadAndInsertAdminData();
    loadAndInsertPatientData();
    loadAndInsertMedicineData();
  }
  // Function to load and insert the admin data into the IndexedDB

  async function loadAndInsertAdminData() {
    try {
      // Fetch the admin data from the local JSON file
      const response = await fetch('http://localhost:8000/files/Admin.json');
      const adminData = await response.json();

      // Insert the admin data into the IndexedDB
      const transaction = db.transaction(['admins'], 'readwrite');
      const store = transaction.objectStore('admins');

      adminData.forEach(admin => {
        const request = store.add(admin);
        request.onsuccess = () => {
          console.log(`Added admin ${admin.username} to the database.`);
        };
        request.onerror = (event) => {
          console.error("Error adding admin:", event.target.error);
        };
      });

      transaction.oncomplete = function() {
        console.log("All admin data added to the database.");
      };

      transaction.onerror = function(event) {
        console.error("Transaction error:", event.target.error);
      };
    } catch (error) {
      console.error("Error fetching or inserting admin data:", error);
    }
  }

The admin file is loading onto the DB but I'm still getting an error saying "error adding admin" along with the transaction error. I've used similar code for my other 2 json files Medicines.json and Patients.json and those files arent even showing up on the DB when i go to the developer tools from inspect element on my website. I'm getting the same transaction errors and error fetching the file for those files too. For context I'm running the localhost:8000 from my project file directory with the cmd command: python -m http.server 8000 . What's the problem here?