iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript Web SQL

Web SQL データベースのテーブルからレコードを検索して取得する

概要

テーブルからレコードを検索して取得する場合には、Web SQLでSELECT文のSQLを実行します。
SELECT文の書式についてはこちらの記事を参照してください。

プログラム例:すべてのレコードを取得する

事前準備

データベースとテーブルを作成し、テーブルにレコードを挿入しておく必要があります。
テーブルの作成はこちらの記事、レコードの挿入はこちらの記事を参照してください。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    function Proc() {
      var db = OpenMyDatabase();
      SelectAllRecord(db);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function SelectAllRecord(dbobj) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("select * from product", [], 
            function (rt, rs) {
              var elem = document.getElementById("output");
              for (var i = 0; i < rs.rows.length; i++) {
                var row = rs.rows.item(i);
                elem.innerHTML += row.id + ", " + row.name + ", " + row.price +"<br/>";
              }
            },
            function () { alert("ERROR"); });
        }
      );
    }
  </script>

</head>
<body>
  <p>レコードの検索 テストページ</p>
  <a href="javascript:Proc();">Select All Record</a><br />
  <div id="output">
  </div>
</body>
</html>

解説

SQL文の実行はデータベースオブジェクトのtransaction メソッドに与えたコールバック関数内で実行します。

  dbobj.transaction(
    function (transact) {
      /* 中略 */
    }
  );

コールバック関数に渡された、transactオブジェクトのexecuteSqlメソッドを呼び出します。第一引数に実行するSQL文の文字列を与えます。
今回はパラメーターは利用しないため、第二引数は空の配列とします。SQL文の実行に成功した場合、第三引数で与えたコールバック関数が呼び出されます。この、コールバック関数内でレコードの値を取得します。
コールバック関数には2つの引数が渡されます。今回は列の値を取得するため2番目の引数を利用します。検索結果のレコード数は rs.rows.length プロパティに設定されます。 forループでレコード数の数だけループします。レコードの値は rs.rows.item(i) で取得します。i に取得するレコード番号を与えます。最初のレコードを取得する際には iの値に0 を与えます。
レコードの各フィールドの値は、取得したrowオブジェクトのフィールド名でアクセスできます。"id"列の値を取得する場合は、row.id でアクセスできます。

今回は取得したレコードの値を id="output" のエリアに表示します。

      transact.executeSql("select * from product", [], 
        function (rt, rs) {
          var elem = document.getElementById("output");
          for (var i = 0; i < rs.rows.length; i++) {
            var row = rs.rows.item(i);
            elem.innerHTML += row.id + ", " + row.name + ", " + row.price +"<br/>";
          }
        },
        function () { alert("ERROR"); });

実行結果

上記のHTMLファイルを実行します。下図のページが表示されます。
Web SQL データベースのテーブルからレコードを検索して取得する:画像1

[Select All Record]のリンクをクリックします。テーブルに挿入されているレコードの値が、ページに表示されます。
Web SQL データベースのテーブルからレコードを検索して取得する:画像2

プログラム例:検索条件に一致したレコードを取得する

事前準備

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    function Proc() {
      var db = OpenMyDatabase();
      SelectRecord(db);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function SelectRecord(dbobj) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("select * from product where CAST(price as DECIMAL) > 100", [], 
            function (rt, rs) {
              var elem = document.getElementById("output");
              for (var i = 0; i < rs.rows.length; i++) {
                var row = rs.rows.item(i);
                elem.innerHTML += row.id + ", " + row.name + ", " + row.price +"<br/>";
              }
            },
            function () { alert("ERROR"); });
        }
      );
    }
  </script>

</head>
<body>
  <p>レコードの検索 テストページ</p>
  <a href="javascript:Proc();">Select All Record</a><br />
  <div id="output">
  </div>
</body>
</html>

解説

SQL文の実行については、先のサンプルを参照して下さい。

今回のサンプルで実行するSQL文は下記です。

select * from product where CAST(price as DECIMAL) > 100

フィールドの型が定義されているデータベースの場合は以下のSQLで検索ができますが、Web SQLの場合はフィールドに型を指定しないでの利用もあるため、先のSQL文にあるCAST関数を用いて数値に変換したうえで、条件式を記述しています。

select * from product where price > 100

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
Web SQL データベースのテーブルからレコードを検索して取得する:画像3

[Select price>100 Record]のリンクをクリックします。テーブルに挿入されているレコードでpriceの値が100より大きいレコードがページに表示されます。
Web SQL データベースのテーブルからレコードを検索して取得する:画像4

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

作成日: 2021-05-15

目次

Web SQL データベースのテーブルからレコードを検索して取得する

目次

概要

プログラム例:すべてのレコードを取得する

事前準備

コード

解説

実行結果

プログラム例:検索条件に一致したレコードを取得する

事前準備

コード

解説

実行結果

関連するページ