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ファイルを実行します。下図のページが表示されます。
[Select All Record]のリンクをクリックします。テーブルに挿入されているレコードの値が、ページに表示されます。
プログラム例:検索条件に一致したレコードを取得する
事前準備
データベースとテーブルを作成し、テーブルにレコードを挿入しておく必要があります。
テーブルの作成は
こちらの記事、レコードの挿入は
こちらの記事を参照してください。
コード
下記の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ブラウザで表示します。下図のページが表示されます。
[Select price>100 Record]のリンクをクリックします。テーブルに挿入されているレコードでpriceの値が100より大きいレコードがページに表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-24
作成日: 2021-05-15
