How to retrieve the data from database using Indexed DB

Question

I have an existed database. I'm trying to retrieve the data from database using indexedDB but i'm unable to get the data from database.

 var data = [];
    // creating or opening the database
    var db;
    var request = window.indexedDB.open("database");

    request.onerror = function(event) {
      console.log("error: ");
    };

    request.onsuccess = function(event) {
      db = request.result;
      console.log("success: "+ db);
    };

    request.onupgradeneeded = function(event) {
         var db = event.target.result;
         var objectStore = db.createObjectStore("Subject", {keyPath: "id"});
         for (var i in data) {
                 objectStore.add(data[i]);       
         }
    }


function readAll() {
    var objectStore = db.transaction("Subject").objectStore("Subject");
    console.log(objectStore);
    objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
            alert("Name for id " + cursor.key + " is " + cursor.value.Subject);
            cursor.continue();
      }
      else {
            alert("No more entries!");
      }
    };      
}

Thanks in Advance.

score 1 · Answer 1 · edited May 23 '17 at 12:00

You're pretty close.

var data = [];

I'll presume that you actually have some data somewhere, and that it indeed has an id attribute since you're specifying that as your index key e.g.

var data = [{id: 'foo' }, { id: 'bar' } ];

Now here:

var objectStore = db.createObjectStore("Subject", {keyPath: "id"});
for (var i in data) {
        objectStore.add(data[i]);       
}

(Careful with for..in and arrays)

I don't think you're actually adding any data here, which is one reason why you can't read it. To add data to an object store, try to first create a read/write transaction first and then get your reference to the object store and add your object.

var trans = db.transaction(["Subject"], "readwrite").objectStore("Subject");

Note the usage of an array as the first argument to transaction() and "readwrite" as the second param. (Some examples use the IDBTransaction.READ_WRITE constant but this doesn't seem to work with recent versions of Webkit.)

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

Try this instead:

var trans = db.transaction( [ "Subject" ] );
  , objectStore = trans.objectStore( "Subject" );
objectStore.openCursor( IDBKeyRange.lowerBound(0) ).onsuccess = function(event) {..}

Actually i'm trying to get the data from database but nothing is showing simply blank page. — Lucky, Oct 03 '13 at 04:31
With the changes above, I was able to read from the example "Subject" table. Have you tried them? — buley, Oct 04 '13 at 14:15
yes but here "Data" is table. In that Data table we have columns like "Subject,Category,data and soon".. i'm trying to get that Subject columns data in listview — Lucky, Oct 05 '13 at 06:03

score 0 · Answer 2 · answered Aug 24 '14 at 09:52

I did encountered the same error once. it occurs because at times the onSuccess is executed even before the result data is returned. So you should check if result data is empty.

To solve the issue try using oncomplete instead of onSuccess and also use Jquery indexedDB plugin. The plugin requires certin code changes but has more consistent implementation of indexedDB. See http://nparashuram.com/jquery-indexeddb/

How to retrieve the data from database using Indexed DB

2 Answers2