indexedDB openCursor transaction onsuccess returns empty array

Question

            req = db.openCursor();
            req.customerData=new Array() //[{a:1}]
            req.onsuccess = function(e) {
                var cursor = e.currentTarget.result;
                if (cursor) {
                    //console.log(cursor.value);
                    e.currentTarget.customerData.push(cursor.value);
                    e.currentTarget.customerData.push("hello?");         
                    cursor.continue()
                }
                else {
                    console.log(e.currentTarget.customerData) //this always correct
                }
            }

     console.log(req.customerData); //outside the onsuccess everything is gone?

console.log(req);

I can see customerData when I open the object in the chrome console

console.log(req.customerData);

But when I do the above it is empty?

replacing new Array() with [{a:1}]

console.log(req.customerData);

I can see a and also the other objects

but then agian

console.log(req.customerData[0].a);

works and the other objects are gone.

How can I save customerData? I tried just pushing numbers or text but same thing after transaction is done. I can't get the data out only display it on console.log() during the transaction?

I know it must be something past by reference but every variable I trow in dissapears?

Added full example below just type write() and read() in console

    <script>
        var iDB
        ready=function(){
            var request = indexedDB.open("my-database",1);
            request.onupgradeneeded = function(e) {
                var db = e.currentTarget.result
                var store = db.createObjectStore("store", {keyPath: "muts", autoIncrement:false})
                //store.createIndex("by_submit", "submit", {unique: false})
                console.log('db upgrade', 'v'+db.version)
            }
            request.onerror = function(e) {
                //var db = e.currentTarget.result;
                //db.close()
                console.error('db error ',e)
            }
            request.onsuccess = function(e) {
                var db = e.currentTarget.result
                db.onversionchange = function(e) {
                    db.close()
                    console.log('db changed', 'v'+db.version, 'CLOSED')
                }
                console.log('db setup', 'v'+db.version, 'OK')
            }
            iDB=request
        }

        drop=function(){
            iDB.result.close()
            var req = indexedDB.deleteDatabase(this.iDB.result.name);
            req.onsuccess = function() {console.log("Deleted database successfully")}
            req.onerror = function() {console.log("Couldn't delete database")}
            req.onblocked = function() {console.log("Couldn't delete database due to the operation being blocked")}
        }

        read=function(){
            var db=iDB
                    .result
                    .transaction(["store"], "readwrite").objectStore("store");

            var req = db.openCursor();
            req.iData=new Array();
            req.onsuccess = function(e) {
                var cursor = e.currentTarget.result;
                if (cursor) {
                    e.currentTarget.iData.push(cursor.value);
                    e.currentTarget.iData.push("hello");
                    cursor.continue()
                }
                else {
                    console.log(e.currentTarget.iData)
                }
            }

            console.log(req.iData)

        }

        write=function(){
            var db=document.querySelector('my\-database')
                .iDB
                .result
                .transaction(["store"], "readwrite").objectStore("store");

            var customerData = [
                {muts: "Bill", qty: "1"},
                {muts: "Donna", qty: "1"}
            ]

            for (var i in customerData){db.put(customerData[i])}
        }

        ready()
    </script>

Answer 1

A few things

• I recommend not setting custom properties of an IDBRequest object. Create and access objects that are in an outer scope instead.
• There is no need to use event.currentTarget. event.target is sufficient (and so is 'this', and so is the request object itself).
• onversionchange is deprecated.
• Due to the asynchronous nature of indexedDB, you may be trying to print something out to the console that does not yet exist, or no longer exists. Instead, try printing something out when the transaction completes.

For example:

function populateArray(openDatabaseHandle, onCompleteCallbackFunction) {
  var transaction = openDatabaseHandle.transaction('store');
  var store = transaction.objectStore('store');
  var myArray = [];
  var request = store.openCursor();
  request.onsuccess = function() {
    var cursor = this.result;
    if(!cursor) return;
    myArray.push(cursor.value);
    cursor.continue();
  };
  transaction.oncomplete = function() {
    onCompleteCallbackFunction(myArray);
  };
}

// An example of calling the above function
var conn = indexedDB.open(...);
conn.onsuccess = function() {
  populateArray(this.result, onPopulated);
};

// An example of a callback function that can be passed to 
// the populateArray function above
function onPopulated(data) {
  console.debug(data);
  data.forEach(function(obj) {
    console.debug('Object: %o', obj);
  });
}