Cannot Store Data IndexedDB (Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value)

Question

So I created an indexed db and then intended to store the data fetched from an api response. But there is an error, I've tried to check whether the data from the response came in or not and the results came in, but it still got an error, and also tried changing the method to put ().

Error

 **Uncaught (in promise) DOMException: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.**

Index

const playerDetails = ShowPlayerDetails();
        const savePlayerButton = document.getElementById("savePlayerButton");
        savePlayerButton.addEventListener("click", event => {
            playerDetails.then(response => {
                dbInsertPlayer(response);
            });
        });

IndexedDB

const idbPromised = idb.open("player-favourite-list", 1, upgradeDb => {
    if(!upgradeDb.objectStoreNames.contains("players")){
        upgradeDb.createObjectStore("players", {autoIncrement: true});
    }
});
const dbInsertPlayer = playerData => {
    return new Promise((resolve, reject) => {
        idbPromised.then(db => {
            const transaction = db.transaction("players", "readwrite");
            console.log(playerData);
            return transaction.objectStore("players").put(playerData);
        })
        .then(transaction => {
            if(transaction.complete){
                resolve(true);
            }
        })
        .catch(error => {
            reject(error);
        });
    });
}

FetchAPI

function ShowPlayerDetails(){
    return new Promise ((resolve, reject) => {

    let urlParams = new URLSearchParams(window.location.search);
    let idParam = urlParams.get("id");

    FetchAPI(`${BASE_URL}players/${idParam}`)
        .then(response => {
            const {name, nationality, countryOfBirth, dateOfBirth, position} = response;
            document.getElementById("player-name").innerHTML = name;
            document.getElementById("player-data").innerHTML = `
            <ul class="collection">
                <li class="collection-item">Name : ${name}</li>
                <li class="collection-item">Nationality : ${nationality}</li>
                <li class="collection-item">Country Of Birth : ${countryOfBirth}</li>
                <li class="collection-item">Date Of Birth : ${dateOfBirth}</li>
                <li class="collection-item">Position : ${position}</li>
            </ul>`;
            resolve(response);
        })
        .catch(error => reject(error));
    })
}

My goal is to enter response data into indexeddb, then display it at another time.

API Response

countryOfBirth: "Senegal"
dateOfBirth: "1992-04-10"
firstName: "Sadio"
id: 3626
lastName: null
lastUpdated: "2020-08-13T03:13:10Z"
name: "Sadio Mané"
nationality: "Senegal"
position: "Attacker"
shirtNumber: null

Muhammad Syabani Falif Muhammad Syabani Falif · Accepted Answer · 2020-08-15T11:37:44

So I add autoIncrement and keyPath inside the object store, and don't forget to delete the database via the Storage Browser or upgrade the current indexed DB version.

Code

const idbPromised = idb.open("player-favourite-list", 1, upgradeDb => {
    if(!upgradeDb.objectStoreNames.contains("players")){
        upgradeDb.createObjectStore("players", {keyPath: "Id", autoIncrement: true});
    }
});

Exception Refference MDN Indexed DB Documentation

Cannot Store Data IndexedDB (Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value)

1 Answers