IndexedDB throws an error when adding a new value into database

Question

I created a database in IndexedDb successfully but when I try to add a value into the database, I see the following error:

DOMException: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.

Code snippet:

let db = new AngularIndexedDB('myDb', 1);

db.createStore(1, (evt) => {
  const objectStore = evt.currentTarget.result.createObjectStore('people', { keyPath: 'id', unique: true });
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
  }).then(() => {
    db.add('people', { name: 'name', email: 'email' }).then(() => {
  }, (error) => {
    console.log(error);
  });

}, (error) => {
   console.log(error);
});

I checked the name of table. That is exactly the same. As well its value respective their keys.

How can I resolve this issue ? Could you please share insight on this error ?

Your help would highly appreciate . Thanks in advance.

Answer 1

When you create an object store with a key path:

 const store = db.createObjectStore('people', { keyPath: 'id' });

Then either:

1. You must also specify that the store should use a key generator, i.e. {keyPath: 'id', autoIncrement: true}, which will cause numeric keys to be generated for you (1, 2, 3, ...) and injected into the values; or:
2. The values you store must already include a property matching the keypath, e.g. store.put({name: 'foo', id: 1234})

(Also, unique is not a property of object stores, only indexes. Keys are always unique within object stores.)