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]
コードブロックを修正しました。そして、それは現在機能しています。