indexedDBにてopenCursorの結果がnullになってしまう。

いつもお世話になっております。

先日こちらで「indexedDB」という存在を教えていただき、使い始めていますが、
データ検索がうまくいかず「null」となってしまいます。

###前提・実現したいこと
商品マスタ照会（のようなもの）

###方法
商品マスタであるcsvファイルを取り込む
↓
配列に格納
↓
ユーザーがラベル１に商品コード１、
ラベル２に商品コード２を入力する
↓
ラベル１・ラベル２の商品コードの組み合わせがマスタにあれば
「OK」と表示する

###困っていること
openCursorの結果がnullになってしまう。

###該当のソースコード
（商品コード１はbarcode1、商品コード２はbarcode2、と表記）

function itemCheckTest(barcode1, barcode2) {
  //1.indexedDB関連オブジェクトの取得
  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.mozIDBTransaction || window.msIDBTransaction;
  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.mozIDBKeyRange || window.msIDBKeyRange;
  var IDBCursor = window.IDBCursor || window.webkitIDBCursor;
  //2.indexedDBを開く
  var idbReq = indexedDB.open("ItemDB", 1);
  //3.DBの新規作成時、またはバージョン変更時に実行するコード
  idbReq.onupgradeneeded = function (event) {
    var db = event.target.result;
    var itemStore = db.createObjectStore("item", { keyPath: "item_id" });
    itemStore.createIndex("bc", ["bc1","bc2"], { unique: false });
    console.log("インデックス追加しました");
    //データの追加
    for (var i = 0, len = csvArray.length; i < len; i++) {
      var csvArrayIn = csvArray[i];
      itemStore.add({ item_id: csvArrayIn[0], bc1:csvArrayIn[1], bc2:csvArrayIn[2]});
      csvArrayIn = [];
    }
    console.log("データ追加しました");
  }
  //4-1.DBオープン失敗時の処理
  idbReq.onerror = function (event) {
    console.log("error");
  };
  //4-2.DBオープン成功時の処理
  var db;
  idbReq.onsuccess = function (event) {
    db = idbReq.result;
    //読み書き権限付きで使用することを宣言
    var transaction = db.transaction(["item"], "readwrite");
    //各オブジェクトストアの取り出し
    var itemStore = transaction.objectStore("item");
    var indexBc = itemStore.index("bc");
    var range = IDBKeyRange.only([barcode1,barcode2]);
    indexBc.openCursor(range).onsuccess = function (event) {
      var cursor = event.target.result;
      if (cursor == null) {
        alertShowForBarcode0Event("NG:" + cursor);
      } else {
        console.log(cursor);
        alertShowForBarcode0Event("OK:" + cursor);
        cursor.continue();
      }
    }
  }
}

Chromeのツールで確かめたところ
インデックスはちゃんとはれているようです。（添付画像）

何かご教授いただければ幸いです。
宜しくお願い致します。

guest1213

2016/09/13 06:10

Chromeでは再現しません。実行環境を追記してもらえると回答できるかもしれません。また、インデックスの各値は文字列のようですので間違って数値を関数に渡していないかという点も気になります。なお、Microsoft製ブラウザ(IE11, Edge)では配列でのインデクス指定はサポートされていません。

Chumi

2016/09/14 00:25

実行環境はChromeのバージョン 53.0.2785.113 (64-bit)です。文字列をベタ打ちして渡して見たりもしたのですが、だめでした。

行動規範の内容に同意します

回答1件

ラベル１・ラベル２の商品コードの組み合わせがDBにないか、

onlyで抽出対象を1件にしてあるにも関わらず
OKの時にあるはずの無い次のカーソルへ進めているのでNGにもなっているのではないでしょうか。
cursor.continue();を消してはどうでしょう。

Chumiさんのコードを一部変更して動かしてみたものをはっておきますね、私の勘違いもあるかもしれませんので。

html
1<html>
2<head>
3<script>
4function itemCheckTest(barcode1, barcode2) {
5
6csvArray = [[1,'a','A'],[2,'b','B']]
7
8  //1.indexedDB関連オブジェクトの取得
9  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
10  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.mozIDBTransaction || window.msIDBTransaction;
11  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.mozIDBKeyRange || window.msIDBKeyRange;
12  var IDBCursor = window.IDBCursor || window.webkitIDBCursor;
13  //2.indexedDBを開く
14  var idbReq = indexedDB.open("ItemDB", 1);
15  //3.DBの新規作成時、またはバージョン変更時に実行するコード
16  idbReq.onupgradeneeded = function (event) {
17    var db = event.target.result;
18    var itemStore = db.createObjectStore("item", { keyPath: "item_id" });
19    itemStore.createIndex("bc", ["bc1","bc2"], { unique: false });
20    console.log("インデックス追加しました");
21    //データの追加
22    for (var i = 0, len = csvArray.length; i < len; i++) {
23      var csvArrayIn = csvArray[i];
24      itemStore.add({ item_id: csvArrayIn[0], bc1:csvArrayIn[1], bc2:csvArrayIn[2]});
25      csvArrayIn = [];
26    }
27    console.log("データ追加しました");
28  }
29  //4-1.DBオープン失敗時の処理
30  idbReq.onerror = function (event) {
31    console.log("error");
32  };
33  //4-2.DBオープン成功時の処理
34  var db;
35  idbReq.onsuccess = function (event) {
36    db = idbReq.result;
37    //読み書き権限付きで使用することを宣言
38    var transaction = db.transaction(["item"], "readwrite");
39    //各オブジェクトストアの取り出し
40    var itemStore = transaction.objectStore("item");
41    var indexBc = itemStore.index("bc");
42    var range = IDBKeyRange.only([barcode1,barcode2]);
43    indexBc.openCursor(range).onsuccess = function (event) {
44      var cursor = event.target.result;
45      if (cursor == null) {
46        console.log("NG:" + cursor);
47      } else {
48        console.log("OK:" + cursor);
49        cursor.continue();
50      }
51    }
52  }
53}
54itemCheckTest('a','A');
55</script>
56</head>
57</html>

Chrome53では次のような結果でした。

OK:[object IDBCursorWithValue]
NG:null

投稿2016/09/13 05:14

編集2016/09/14 00:45

退会済みユーザー

総合スコア0

Chumi

2016/09/14 00:39

ご回答ありがとうございます。アドバイス通りにcursor.continue();を消しましたが、nullのままでした。 console.logも出してみましたが、OKの方の分岐は通っていないようでした。

退会済みユーザー

2016/09/14 00:55

ひょっとしますと、商品コードを数値として渡していないでしょうか？文字列として渡すと問題ないと思いますが、bc1の商品コードは0から始まっているため数値としてしまうと`0061218434001`が`61218434001`となることでヒットしていないのかもしれません。

Chumi

2016/09/14 01:13

コメントありがとうございます。ログに出してみました。 ``` indexBc.openCursor(range).onsuccess = function (event) { console.log(barcode1 + "," + barcode2); var cursor = event.target.result; ``` 結果 ``` 0061218434001,1002600720059 ``` でした。文字列として渡せているようです。

guest1213

2016/09/14 02:54

追加・修正依頼にも書きましたが、私の環境でもこちらの回答と同様の結果、すなわち正しくヒットしたオブジェクトを返すカーソルが取得できます。ChromeでもFireFoxでもSafari(OS X, iOS)でも取得できます。Microsoft製ブラウザのみvar range = IDBKeyRange.only([barcode1,barcode2]);でDataErrorとなります。現在の情報だけでは「うまくいかず「null」」になるという現象は再現しません。

行動規範の内容に同意します