Trouble inserting data to indexeddb using indexeddb jquery api

StackOverflow https://stackoverflow.com/questions/22773455

Question

I have tried many various ways to insert data (see the // comments). But still it doesn't seem to insert the data in either chromium or firefox (with ubuntu).

Full example:

` 

<!doctype html>
<html><head>
<meta charset="UTF-8">
<script type = "text/javascript" src="jquery-1.11.0.js"></script>
<script type = "text/javascript" src="jquery.indexeddb.js"></script>
</head><body><script type = "text/javascript">


var key = null;
// Simply open the database once so that it is created with the required tables

$.indexedDB("BibleWay", {
    "schema": {
            "1": function(versionTransaction){
                    var catalog = versionTransaction.createObjectStore("context", {
                            keyPath: 'keyPath', autoIncrement: true
                    });
                    catalog.createIndex("bid");
                    catalog.createIndex("bk");
                    catalog.createIndex("c");
                    catalog.createIndex("v");
                    catalog.createIndex("t");
            },
    }
}).done(function(){
    // Once the DB is opened with the object stores set up, show data from all tables
    window.setTimeout(function(){

            downloadCatalog();
    }, 200);
});
function downloadCatalog(){
    $.getJSON("3.json", function(data){

            $.indexedDB("BibleWay").transaction("context").then(function(){
                    console.log("Transaction completed, all data inserted");
                    // loadFromDB("catalog");
            }, function(err, e){
                    console.log("Transaction NOT completed", err, e);
            }, function(transaction){
                    var catalog = transaction.objectStore("context"),$doadd,i2=0;;
                    catalog.clear();
                    /*$.each(data, function(i){
                            _(catalog.add(this));
                    })*/
                    $.each(data, function( index, value ) {
                        // bible id [bid]
                        var split_bid=index;
                        $.each(value, function( index, value ) {
                            // bible book name
                            var split_bk=index;
                              $.each(value, function( index, value ) {
                                // bible book chapter
                                var split_c=index;
                                $.each(value, function( index, value ) {
                                    //var $doadd={"bid":split_bid,"bk":split_bk,"c"=split_c ,"v"=index,"t"=value};
                                     //$doadd="{bid:\""+split_bid + "\",bk:\"" + split_bk + "\",c=" + split_c + ",v=" + index + ",t=\"" + value+"\"}";

                                    $doadd=new Object();
                                    $doadd.bid=split_bid;
                                    $doadd.bk=split_bk;
                                    $doadd.c=split_c;
                                    $doadd.v=index;
                                    $doadd.t=value;

                                    catalog.add($doadd);
                                    if (i2<10) {
                                        console.log($doadd);
                                        ++i2;
                                    }
                                    //catalog.add(JSON.stringify($doadd));
                                    //catalog.add({bid:split_bid,bk:split_bk,c:split_c,v:index,t:value});
                                    //console.log(split_bid + " " + split_bk + " " + split_c + " " + index + ": " + value );
                                })

                              })
                        })

                    });
            })
    }

    );
}
//$.indexedDB("BibleWay").deleteDatabase();

</script></body></html>

`

The JSON file "3.json": 

{"3":{"GEN":{"1":{"1":"In the begynnynge God created heaven and erth."}}}}

Console Messages: XHR finished loading: "http://host.host/3.json". jquery-1.11.0.js:9666

Object {bid: "3", bk: "GEN", c: "1", v: "1", t: "In the begynnynge God created heaven and erth."}

Transaction completed, all data inserted.

I found a bug in the jquery indexeddb api first that i fixed by commenting the line 90:

//e.name = "exception";
dfd.rejectWith(idbRequest, ["exception", e]);

This test is based on the code found in this example: http://nparashuram.com/jquery-indexeddb/example/

Thank you for your help

Was it helpful?

Solution

It's important and common for a library to surface any underlying errors, so if you've got some error messages or other warnings please update your answer to include them. I am wondering in particular whether your transaction has autocommited before the write was attempted.

I'm not too familiar with this API, but I see a common antipattern in that you are chaining your store creation and data insertion. Unless your jQuery library has designed around this common pattern, you could be running into that trouble here.

In IDB all action happens in a transaction. When you create modify anything related to a store or index you need what in IDB parlance is called a versionchange event. While such a transaction is capable of writing, reading and modifying schema, a phenomena us developers notice is that it ends up "autocommiting" despite your best attempts to keep it alive using closures, which maintain a reference to the commit and thereby should (I believe) keep it from commiting.

In case that's the problem, I suggest you decompose your callback hell into smaller helldoms: one for the object store, one for the object insertion. What this tends to do is create two closures around your versionchange and readwrite transactions and makes sure each operation completes successfully.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top