Uncaught InvalidStateError: Failed to read the 'result' property from 'IDBRequest': The request has not finished

Question

I need your help guys.

I am using indexedDB. I need to read records from a table in the DB using Javascript but I am getting an error message that says from Chrome browser V52 Uncaught InvalidStateError: Failed to read the 'result' property from 'IDBRequest': The request has not finished.

Below is my Javascript code

var db; var availableJobs = 0;

    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

    var request = window.indexedDB.open("MyDbName", 1);

    request.onsuccess = function (event) {
        db = request.result;
    }

    request.onblocked = function (event) {
        db = "blocked...";
    };

    request.onerror = function (event) {
        db = "Error...";

    };

    var objectStore = db.transaction("ActionCard").objectStore("ActionCard");

    objectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;

        if (cursor) {
            if (cursor.value.ActionCardStatusId == 1 || cursor.value.ActionCardStatusId == 3) {
                availableJobs++;
            }

            cursor.continue();
        }

        $("#availableJobs").html(availableJobs);
    }

I am getting an error message on this line

var objectStore = db.transaction("ActionCard").objectStore("ActionCard");

Answer 1

You need to learn about how to write asynchronous Javascript. Your db variable isn't defined at the time you access it.

Don't do this:

var r = indexedDB.open();
var db = null;
r.onsuccess = function(event) { db = event.target.result); }

Do this:

var r = indexedDB.open();
r.onsuccess = function(event) {
  var db = event.target.result;
};

And yes, that means db isn't available outside the scope of the onsuccess function. Stop trying to use it outside its scope or you will just run into the problem you are experiencing.

Answer 2

You can assign db like this and use it outside like you wanted or in functions for add/put or get or for removing from the IndexedDB. The below is sample piece.

var db;
var request = window.indexedDB.open("db_name", 1);

request.onupgradeneeded = function() {
    var db = request.result;
    var storeName = db.createObjectStore("storeName", {keyPath: "keyAttribute"});
    storeName.createIndex("testIndex", "testCase", { unique: false });
};
request.onerror = function(event) {
  // Do something with request.errorCode!
  console.log("failed opening DB: "+request.errorCode)
};
request.onsuccess = function(event) {
  // Do something with request.result!
  db = request.result;
  console.log("opened DB")
};

//Adding function - can pass values as function params
function addData(objectStoreName){
    // Start a new transaction
    var transaction = db.transaction(objectStoreName, "readwrite");
    var objectStore = transaction.objectStore(objectStoreName);
    // Add some data
    var request = objectStore.put({testCase: 'ddi',timestamp: performance.now(), name: "testname2", data: 'asdsadas'});
        request.onsuccess = function(event) {
            // event.target.result === customer.ssn;
            console.log("request.onsuccess: "+event.target.result);
        };
        request.onerror = function(event) {
            // event.target.result === customer.ssn;
            console.log("request.onerror: "+request.errorCode);
    };
    transaction.oncomplete = function(event) {
      console.log("All added to "+objectStore+"!");
    };
    transaction.onerror = function(event) {
      // Don't forget to handle errors!
      console.log("Error in adding data to "+objectStore+"!");
    };
}


function getData(objectStoreName){
    // Start a new transaction
    var transaction = db.transaction(objectStoreName, "readwrite");
    var objectStore = transaction.objectStore(objectStoreName);
    var index = objectStore.index("TestCaseIndex");
    // Query the data
    var getDDIData = index.get("ddi");
    getDDIData.onsuccess = function() {
        console.log(getDDIData.result);
    };
}