Question

I have to display data from a xml with 66730 lines stored in a 14 MB xml file.

I would like to store data in a HTML5 indexedDB.
I read Mozilla’s “Using IndexedDB”, HTML5ROCKS “Databinding UI elements with indexeddb” and HTML5ROCKS “A simple TODO list using HTML5 IndexedDB.

I could not perform what I wanted to because of managing with asynchronous calls and I do not know where to instantiate the objectStore. Could you help?

window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

var request = indexedDB.deleteDatabase("opinions");
console.log("opinions DB is deleted");

var db;

function handleSeed() {
  db.transaction(["opinion"], "readonly").objectStore("opinion").count().onsuccess = function(e) {
    var count = e.target.result;
    if(count == 0) {

      $.ajax({
        type: 'GET', url: 'data/mergedXML_PangLee.xml.tag.sample.xml', dataType: 'xml',
        success: function(xml) {
          console.log("Need to generate fake data - stand by please...");
          $("#status").text("Please stand by, loading in our initial data.");
          var done = 0;
          var trans = db.transaction(["opinion"], "readwrite");
          var opinionsObjectStore = trans.objectStore("opinion");
          var comments = $(xml).find('Comment');

          // CODE1
          for(var c = 0 ; c < comments.length ; c++) {
            var opinions = $(comments[c]).find('Opinion');
            for(var o = 0 ; o < opinions.length ; o++) {
              var opinion = {};
              opinion.type = "jugement";
              var resp = opinionsObjectStore.add(opinion);
              resp.onsuccess = function(e) {
                done++;
                if(done == 33) {
                  $("#status").text("");
                  renderOpinion();
                } else if (done % 100 == 0) {
                  $("#status").text("Approximately " + Math.floor(done / 10) + "% done.");
                }
              }
            }
          }
        }
      });
    } else {
      console.log("count is not null: " + count);
      $("#status").text("ObjectStore already exists");
      renderOpinion();
    }
  };
}

function renderOpinion() {

  var transaction = db.transaction(["opinion"], "readonly");
  var objectStore = transaction.objectStore("opinion");
  objectStore.openCursor().onsuccess = function(e) {
    var cursor = e.target.result;
    if(cursor) {
      $("#opinions").append("<li>" + cursor.value.type + "</li>");
      cursor.continue();
    }
    else {
      alert("No more entriese");
    }
  };
}

$(document).ready(function(){
  console.log("Startup...");

  var openRequest = indexedDB.open("opinions", 1);

  openRequest.onupgradeneeded = function(e) {
    console.log("running onupgradeneeded");
    var thisDb = e.target.result;

    if(!thisDb.objectStoreNames.contains("opinion")) {
      console.log("I need to make the opinion objectstore");
      var objectStore = thisDb.createObjectStore("opinion", {keyPath: "id", autoIncrement: true});
    }
    else {
      console.log("opinion objectstore already exists");
    }
  }

  openRequest.onsuccess = function(e) {
    db = e.target.result;

    db.onerror = function(e) {
      console.log("***ERROR***");
      console.dir(e.target);
    }
    handleSeed();
  }
})

[EDIT]

Observed behavior:

• When the page is opened, alert("Sorry, an unforseen error was thrown.") appears like 30 times (as I have 30 items to store).
• The $("#todoItems").append("<li>" + cursor.value.type + "</li>"); is never called
• It is like I cannot follow the run with firebug, my breakpoint does not work, like asynchronymous was a matter. f.i. if I had two breakpoints on lines resp = objectStore.add(opinion); and alert("Sorry, an unforseen error was thrown.");, the second one is never called.

Expected behavior:

• Store the xml items into an html5 indexeddb
• Retrieve the items stored in an html5 indexeddb and display them into an <ul> html list.

Console log:

• Display the text “Error on inserting an opinion”
• And a NotFoundError: The operation failed because the requested database object could not be found. For example, an object store did not exist but was being opened.
[Break On This Error] var objectStore = db.objectStore(["opinions"], "readonly");

[EDIT2]

I corrected the code block. And it is working now.

Answer 1

By tries and errors I finally make the code work. The code in the question can be used for other XML to indexedDB uses.