HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。Programming2018-12-12HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。PC・ガジェットこんにちは、たねやつです。目標SQLについて理解を深めるデータベースから取得した値を画面に表示させる今回はSQLのSELECT文を使用します。前回記事の中でSELECT文を実行して確認してみるのも良かったのですが、結局この記事でまた同じようなことを行うのであえて書きませんでしたm(__)mまずはlist.htmlが表示された時に、データベースにアクセスして登録されているデータを取得する処理を追加します。list.js内のinit()内に以下を追加します。登録ボタンの処理の部分よりも前に書いても後ろに書いても大丈夫です。this.dispNoTitlePopup('一覧の作成に失敗しました。}.bind(this))},登録されているデータを取得getRegisteredDataという関数でPromiseを返し、成功時と失敗時の処理という感じは登録処理と同じですね。この関数内でSQLを実行してデータを取得するのですが取得成功時に、そのデータで一覧を作成し、取得失敗時にはエラーのポップアップを表示します。次にgetRegisteredDataの中身です。dispNoTitlePopupの関数の下あたりに追加しておきましょう。最後にすべてのソースを書き終わってから関数の並びは整理しようと思います。データベースに登録されているデータを取得します。});},ちょっとヘビーな感じですが、基本的な処理の流れは登録時とほぼ同じです。登録の部分で言い忘れていましたが、各文字列の末尾の半角スペースは必ず残しておいてください。id;というようなSQL文になってしまいエラーとなります。各予約語やカラム名の後ろには必ずスペースかタブが必要です。WHERE句を使用することで取得するデータの絞り込み条件を設定することができます。1で有効フラグが1(true)のもののみ抽出します。0(false)となるためです。BY句を使用することでデータの並びを整えることができます。後ろに指定したカラム(今回はid)を使用して順番に並べます。idとすることでidの小さい順(登録日時が古い順、昇順)に並びます。DESCとしてください。BY句とともに使用することというの(私の中では)あります。いうのも使用しない場合、システムの気分次第でデータの並びが変わってしまうことがあるからです。DESCを私は使用します。並び順が変わるだけで処理には影響しませんのでどちらでもOKです!話を戻します。SELECT文を実行して取得結果はtx.executeSql()のコールバック関数の第2引数(result)に格納されます。深堀してresult.row.item[]に配列として取得できた行分だけ値が格納されています。for文を使用して値を取り出しています。すべての値を取り出し終わったら、取り出した値をデバッグに表示してresolve()の引数にのっけて返します。することで、呼び出し元のthen()内で使用することができます。ret‘という変数がまさにそれですね。次に、取得できたデータから一覧を作成します。以前作成した動的に一覧を生成する処理とほぼ同じとなります。getRegisteredDataのthen内の関数、dispTodoListに処理を追加していきます。getRegisteredDataの関数の下に以下のような感じで追加してください。false);この部分に関しては次の削除機能で使用するものですがこの段階で追加しておきます。TODOの一行ごとにSQLで取得したデータを保持させます。削除時にはそのデータの中のidの値を使用して削除条件の絞り込みを行います。このままだとアプリ実行時にthis.onClickListItemという関数が存在しないというエラーが発生するため、いったん仮で関数を作成しておきます。dispTodoListの下に追加してください。アイテムタップ時の処理。一一)表示するデータが少ない場合は、まだ登録完了時に一覧を更新する処理は追加していないので、十分な件数を登録してからアプリを再起動してください。増えていることが確認出来たら次に進みましょう。TODOをタップしてみてVSCode上のデバッグコンソールにログが表示されることも確認してください。後でここに削除処理を追加します。最後に、登録成功時に一覧を更新する処理を追加します。登録成功時に再度データの取得と一覧の作成を行います。dispTodoListの処理を一部追加します。...}一覧作成時にすべての一覧の子要素(<ons-list-item>)を削除します。これを追加しない場合、登録のたびにどんどん一覧が膨れ上がってしまいますorzelement.textContentでHTMLの要素のタグ内の値を参照することができます。innerHTMLでも同じような感じでタグ内の値を参照できますが、こちらはHTMLソースがそのまま帰ってきます。<ons-list-item>ccc</ons-list-item></ons-list>とある場合、document.getElementById('list').textContentの値は、aaabbbcccという感じになります。一方でdocument.getElementById('list').innerHTMLは、<ons-list-item>aaa</ons-list-item><ons-list-item>bbb</ons-list-item><ons-list-item>ccc</ons-list-item>という感じです。これにnullをセットすることで子要素を消し飛ばすことができるのでそれを使用します。次に登録成功時の処理を追加します。this.execInsertSql(values).then()内の処理を変更します。}.bind(this))これで表示はできます。Promiseのチェーン内に別のPromiseチェーンが発生してしまっています。}.bind(this))と書いて、SQLの結果を待ってから成功時の処理とすればいいのですが、今回使用しているデータベース操作用のモジュールのSELECT文を実行時にコールバック関数で実装されていることが原因でうまく非同期処理にできないようです。いうわけのわからない順番で実行されてしまうので、SQLの実行結果をうまく使用できません。回避はできるので、ソースはブサイクですがこれで実装します。次に別のアプリなんかを作るときには要注意ですね。orzでは動作確認しましょう。仮想端末を再起動してデータを登録してみましょう。ポップアップの表示と同時に一覧が更新されているのが確認できると思います。18:43HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。登録したデータを表示する)Tweet関連記事2018-11-08HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。ローカルデー...Cordovaプロジェクトでローカルデータベース(SQLite)を使用する...2018-09-04QMKのビルド環境構築こんにちは、たねやつです。Piで水温を取得する。自作キーボードについていろいろ書いています。84を2年ほど使ってみた感想・打鍵音など。2019-12-14はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する2019-12-11イルミナイト万博(2019)行ってきました。背景を元に戻すAdはてなブログをはじめよう!ibuquicalligさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。