0

14MBのxmlファイルに格納されている66730行のxmlからのデータを表示する必要があります。

HTML5のindexedDBにデータを保存したいと思います。Mozillaの「 UsingIndexedDB 」 、HTML5ROCKS「indexeddbを使用したデータバインディングUI要素」およびHTML5ROCKS「HTML5IndexedDBを使用した単純なTODOリスト」を読みました。

非同期呼び出しで管理しているため、目的の実行ができず、objectStoreをインスタンス化する場所がわかりません。手伝ってくれる？

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();
  }
})

[編集]

観察された行動：

  • ページを開くと、alert("Sorry, an unforseen error was thrown.")30回表示されます（保存するアイテムが30個あるため）。
  • $("#todoItems").append("<li>" + cursor.value.type + "</li>");呼ばれることはありません
  • ファイアバグで実行を追跡できないようです。非同期が問題だったように、ブレークポイントが機能しません。fi行resp = objectStore.add(opinion);とalert("Sorry, an unforseen error was thrown.");に2つのブレークポイントがある場合、2番目のブレークポイントは呼び出されません。

予想される行動：

  • xmlアイテムをhtml5indexeddbに保存します
  • html5 indexeddbに保存されているアイテムを取得し、<ul>htmlリストに表示します。

コンソールログ：

  • 「意見の挿入エラー」というテキストを表示します
  • そして、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");

[編集2]

コードブロックを修正しました。そして、それは現在機能しています。

4

1 に答える 1

-2

試行錯誤によって、私はついにコードを機能させることができます。問題のコードは、indexedDBで使用する他のXMLに使用できます。

于 2012-11-19T10:38:25.880 に答える