0

Web SQLで取得したデータをAngularJSを使って表示することができず、困っております。

解決策をご存知の方、ご教授頂けないでしょうか。

↓ page1.html

 <ons-page id="page1">
 <div ng-controller="hoge_Controller">  
  <ons-list ng-repeat ="item in items”>
     {{item.name}}
  </ons-list>
 </div>
 </ons-page>

↓ Controller.js

var app = angular.module('myApp', ['onsen']);

app.controller('hoge_Controller', function($scope){
    $scope.items = getList();
});



function getList(){

    alert('ここのアラートは表示される')

    var storeList= [];

    var db = window.openDatabase("Database", "1.0", "TDatabase", 200000);

    alert('ここのアラートは表示されない')

    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS hoge (id, name)');
        tx.executeSql('INSERT INTO hoge(id,name) VALUES("1234","test")');

        tx.executeSql('SELECT id , name FROM hoge', [], function (tx, result) {
            for (var i = 0; i < result.rows.length; i++) {
                storeList.push({'id' : result.rows.item(i).id.toString(), 'name' : result.rows.item(i).name.toString()});
            }

            //// ↓「1234」がアラートで表示される
            //alert(result.rows.item(0).id.toString());

            //※※※ ↓この配列を「page1.html」に表示したい ※※※
            return storeList;

        });
    }); 

};

↓ index.html

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="js/controller.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.bootstrap();
    ons.ready();
  </script>
</head>


<body>
  <ons-navigator
    var="myNavigator"
    page="page1.html">
  </ons-navigator>
</body>

</html>

何卒よろしくお願いいたします。

3
  • 掲載したコードは、いくつかミスや使い方が間違っている箇所があります。まずは、MonacaデバッガーやGapDebugなどを利用して、ひとつひとつの機能が正しく動作しているか確認することから始めてください。
    – otak-lab
    Commented 2017年1月5日 17:17
  • oTakさん、早速のご回答ありがとうございます! Monacaデバッガーを使ってエラーチェックしてみたいと思います。
    – Taka M
    Commented 2017年1月9日 15:26
  • エラーいくつか見つかりましたので、質問内容を修正させて頂きました。 どうやら、Controller.js内のopenDatabaseがうまく動作していないようです。使い方が誤っているのでしょうか?
    – Taka M
    Commented 2017年1月9日 15:40

1 件の回答 1

1

取得したデータが表示されない原因は、非同期だからです。

$scope.items = getList();

getList()の戻り値としてundefinedが返ってくるため、何も表示されません。

この場合、promiseを使えば解決できます。
処理の完了を待ってから次の処理をしたい」の回答を参照してください。

Taka Mさんが掲載したコードには問題箇所がたくさんありますが、主題と異なりますのでそれについての回答は控えさせていただきます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。