I am working on a website that will take user data from the form and show it in the table below. I am using indexedDB and everything works locally on my laptop, but when I deploy it to GitHub pages, I get this error:
NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.
let db;
let request = window.indexedDB.open("newDatabase", 1);
request.onupgradeneeded = function (event) {var db = event.target.result;
var objectStore = db.createObjectStore("client", {autoIncrement: true,});
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("lastName", "lastName", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
objectStore.createIndex("ID", "ID", { unique: true });
objectStore.createIndex("postal", "postal", { unique: false });
objectStore.createIndex("phoneNumber", "phoneNumber", { unique: true });
var formElements = document.getElementById("form");
var request = db
.transaction(["client"], 'readwrite')
.objectStore("client")
.add({
name: formElements[0].value,
lastName: formElements[1].value,
email: formElements[2].value,
postal: formElements[3].value,
ID: formElements[4].value,
phoneNumber: formElements[5].value,
});
I read on the internet that it may happen when the name of an objectStore is different from the name in the transaction, but it is not the case here, they are both the same. I tried changing them to other names, but the issue was still there...
db.createObjectStore("client", {autoIncrement: true,});
.
.
.
var request = db
.transaction(["client"], 'readwrite')
The problem was in request.onupgradeneeded
callback, in my implementation I was adding to objectStore
two clients with the same ID. As you can see in the code below the ID should be unique. By adding those two clients the function was throwing an error and was calling request.onerror
, and that is why the database could not be opened and objectStore was not created.
request.onupgradeneeded = function (event) {
var db = event.target.result;
console.log("Object Store creation");
var objectstore = db.createObjectStore("client", {
autoIncrement: true,
});
objectstore.createIndex("name", "name", { unique: false });
objectstore.createIndex("lastName", "lastName", { unique: false });
objectstore.createIndex("email", "email", { unique: true});
objectstore.createIndex("ID", "ID", { unique: true }); //HERE WAS THE PROBLEM
objectstore.createIndex("postal", "postal", { unique: false });
objectstore.createIndex("phoneNumber", "phoneNumber", { unique: true});
for (var i in clientData) {
objectstore.add(clientData[i]); // Here was the error thrown
}
};
const clientData = [
{
name: "Piotr",
lastName: "Wesoly",
email: "PiotrWesoly@gmail.com",
ID: 'CCU238293', //The same ID as in the other client
postal: "90-234",
phoneNumber: "500500200"
},
{
name: "Pawel",
lastName: "Rosiak",
email: "pawelRosiak@gmail.com",
ID: 'CCU238293', //The same ID as in the other client
postal: "93-234",
phoneNumber: "500400200"
},
];
The fix was easy: either set unique to false or change the ID of one of the clients to something unique.