質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.46%

  • JavaScript

    21030questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5301questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

javascript indexeddbのindexを使った検索について

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 131

tetsu777

score 12

■やりたいこと
1『1登録・更新』の大分類1・中分類1・小分類1欄に任意の値を入力、設定ボタンを押して値を登録(setValue関数)

2『3インデックスを使った検索』にて大分類2欄(getAllcate関数)をクリック→『4処理結果2』(id="result2")に表示される上記1で登録した候補の中から値を選択・大分類2欄に選択値を表示(getAllcate関数)、同様に中分類2でも候補の中から値を選択し選択値を表示(getAllcate2関数)

3『3インデックスを使った検索』にて数値を入力、設定ボタンを押して値を登録(copysetValue関数)

4『3インデックスを使った検索』にて再度上記2操作で、大分類2、中分類2の各値を候補から選択、条件付き取得ボタンを押して大分類2・中分類2の各値にて選択した候補の条件を全て満たす値を『4処理結果2』(id="result3")に全て表示(copygetAllvalue関数)

■問題点
1.ブラウザによって結果が異なる
(ios版chromeや同版firefoxでは上記●やりたいこと3までは動作するが、PC版同アプリでは上記●やりたいこと2で大分類2の候補の中から値選択することは出来るのですが、中分類2を選択しても『4処理結果2』に候補が表示されない。)
2.●やりたいこと4にて条件付き取得ボタンを押しても結果が『4処理結果2』に表示されない(copygetAllvalue関数でevent.target.result == nullになる)

■質問内容
PC版chromeのデベロッパーツールでは「handler took ××ms」との警告は出るのですが、エラーは見つけることが出来ませんでした。
何処を修正すれば上記■問題点1・2を修正出来るのでしょうか?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <h3>1登録・更新</h3>
  <p>大分類1:<input type="text" id="newvalue"/></p>
  <p>中分類1:<input type="text" id="newvalue2"/></p>
  <p>小分類1:<input type="text" id="newkey"/></p>
  <input type="button" value="設定" onclick="setValue()"/>

  <h3>参照</h3>
  <input type="button" value="全取得" onclick="getAll()"/>

  <h3>2処理結果</h3>
  <div id="result"></div>
<hr/>
  <h3>3インデックスを使った検索</h3>
  <form action="#">
    <p>大分類2:<input type="text" value="" readonly="readonly" name="copy" id="copy" onclick="getAllcate()"/></p>
    <p>中分類2:<input type="text" value="" readonly="readonly" name="copy" id="copyvalue2" onclick="getAllcate2()"/></p>
    <p>数値:<input type="number" id="price"/></p>
    <input type="button" value="設定" onclick="copysetValue()"/>
    <input type="button" value="全取得" onclick="copygetAll()"/>
    <input type="button" value="全取得value" onclick="copygetAllvalue()"/>
    <h3>4処理結果2
    </h3>
    <div id="result2"></div><hr>
    <div id="result3"></div><hr>
  </form>

</body>
<script>
  var db;
  var indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB;
  if (indexedDB) {
    var openRequest = indexedDB.open("mydb", 1.0);
    openRequest.onupgradeneeded = function(event) {

      db = event.target.result;
     var store = db.createObjectStore("mystore", { keyPath: "mykey",autoIncrement:true});
      store.createIndex("myvalueIndex",["myvalue","myvalue2"],{unique:false,multiEntry:false});
      store.createIndex("myvalueIndexcate",["myvalue"],{unique:false,multiEntry:false});
      var store2 = db.createObjectStore("copymystore", { keyPath: "timeStamp",autoIncrement:true});
      store2.createIndex("copymyvalueIndex",["copymyvalue","copymyvalue2","price"],{unique:false,multiEntry:false});

    }
    openRequest.onsuccess = function(event) {
      db = event.target.result;
    }
  } else {
    window.alert("このブラウザではIndexed DataBase API は使えません。");
  }

  function setValue(event) {
    var key = document.getElementById("newkey").value;
    var value = document.getElementById("newvalue").value;
    var value2 = document.getElementById("newvalue2").value;
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var request = store.put({ mykey: key, myvalue: value, myvalue2: value2});
    request.onsuccess = function (event) {
      document.getElementById("newkey").value = "";
      document.getElementById("newvalue").value = "";
      document.getElementById("newvalue2").value = "";
    }
  }

  function getAll(event) {
    var result = document.getElementById("result");
    result.innerHTML = "";
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var request = store.openCursor();
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      result.innerHTML += "key:"  + cursor.key + "value:" + data.myvalue +  "  value2:" + data.myvalue2 + "<br>";
      cursor.continue();
    }
  }

  function getAllcate(event) {
    var result = document.getElementById("result2");
    result.innerHTML = "";
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var index = store.index("myvalueIndexcate");
    var request = index.openCursor(null,"nextunique");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      var p = document.createElement("p");
      p.classList.add("txtb");
      p.setAttribute("value", data.myvalue);
      p.innerHTML = "大分類2: " + data.myvalue; 
      p.addEventListener("click", function(event){
        document.querySelector("#copy").value = event.target.getAttribute("value");
      });
      result.appendChild(p);
      cursor.continue();
    }
  }


    window.addEventListener('DOMContentLoaded', function(e){
    [].forEach.call(document.querySelectorAll('.txtb'),function(x){
      ["click","input"].forEach(function(y){x.addEventListener(y,function(e){
    var v=(x.nodeName=="INPUT")?x.value:x.textContent;
        document.querySelector('#copy').value=v;

      });
                                           });
    });
  });


  function getAllcate2(event) {
    var value1 = document.getElementById("copy").value;
    var result = document.getElementById("result2");
    result.innerHTML = "";
    var transaction = db.transaction(["mystore"], "readwrite");
    var store = transaction.objectStore("mystore");
    var index = store.index("myvalueIndexcate");
    var request = index.openCursor(value1,"nextunique");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      var p = document.createElement("p");
      p.classList.add("txtm");
      p.setAttribute("value", data.myvalue2);
      p.innerHTML = "中分類2: " + data.myvalue2; 
      p.addEventListener("click", function(event){
        document.querySelector("#copyvalue2").value = event.target.getAttribute("value");
      });
      result.appendChild(p);
      cursor.continue();
    }
  }


    window.addEventListener('DOMContentLoaded', function(e){
    [].forEach.call(document.querySelectorAll('.txtm'),function(x){
      ["click","input"].forEach(function(y){x.addEventListener(y,function(e){
    var v=(x.nodeName=="INPUT")?x.value:x.textContent;
        document.querySelector('#copyvalue2').value=v;

      });
                                           });
    });
  });


  function copysetValue(event){
    var timestamp = new Date().getTime();
    var copyvalue = document.getElementById("copy").value;
    var copyvalue2 = document.getElementById("copyvalue2").value;
    var price = document.getElementById("price").value;
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
    var request = store.put({timeStamp:timestamp, copymyvalue:copyvalue, copymyvalue2:copyvalue2, price:price});
    request.onsuccess = function (event) {
      timestamp = new Date().getTime();
      document.getElementById("copy").value = "";
      document.getElementById("copyvalue2").value = "";
      document.getElementById("price").value = "";
    }
  }

  function copygetAll(event) {
    var result = document.getElementById("result3");
    result.innerHTML = "";
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
    var request = store.openCursor();
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      result.innerHTML += " key:"  + cursor.primaryKey +"  value:" + data.copymyvalue +  "  value2:" + data.copymyvalue2 + " 数値:" + data.price + "<br>";
      cursor.continue();
    }
  }


  function copygetAllvalue(event) {
        var result = document.getElementById("result3");
    result.innerHTML = "";
   var copyvalue = document.getElementById("copy").value;
    var copyvalue2 = document.getElementById("copyvalue2").value;
    var transaction = db.transaction(["copymystore"], "readwrite");
    var store = transaction.objectStore("copymystore");
        var index = store.index("copymyvalueIndex");
   var request = index.openCursor([copyvalue, copyvalue2],"next");
    request.onsuccess = function (event) {
      if(event.target.result == null) {
        return;
      }
      var cursor = event.target.result;
      var data = cursor.value;
      result.innerHTML += " key:"  + cursor.primaryKey +"  value:" + data.copymyvalue +  "  value2:" + data.copymyvalue2  + " 数値:" + data.price +"<br>";
      cursor.continue();
    }
  }

</script>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2019/02/19 15:06

    具体的に検証できたわけではないのでこちらに書きますが、
    IndexedDBは非同期実行なのでもしかしたらそこが関係するかもしれませんね。
    ブラウザによって若干そこの処理に違いが出る可能性はあります。

    キャンセル

  • tktkt

    2019/02/21 01:26

    var request = index.openCursor(value1,"nextunique");
    のvalue1が怪しいと思います。IDBKeyRangeで指定してみたらどうでしょうか。
    どうしても、解決できないようなら、IndexedDBはDexieを挟んで操作された方がわかりやすいかもしれません

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21030questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5301questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。