

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

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

↓ page1.html

[code]

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

↓ Controller.js

[code]

    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;
    
            });
        }); 
    
    };
    
[/code]

↓ index.html

[code]

    <!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>
    
[/code]

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


CC BY-SA 3.0
2017-01-05T16:08:11.663
31644
2017-03-14T10:30:49.807
2017-01-09T15:38:50.050
19657
19657
question
monaca onsen-ui angularjs web-sql
Web SQLで取得したデータをAngularJSを使って表示する方法について


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

[code]

    $scope.items = getList();
    
[/code]

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

この場合、promiseを使えば解決できます。  
「[処理の完了を待ってから次の処理をしたい](https://ja.stackoverflow.com/questions/19694/)」の回答を参照してください。

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


CC BY-SA 3.0
2017-01-09T16:55:04.340
31734
2017-01-09T18:15:10.343
2017-04-13T12:52:38.920
-1
9566
31644
answer