Problem with loading JSON file into IndexedDB through javascript

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?