Learn how to view data retrieved from Web SQL using AngularJS

I am having a hard time displaying the data obtained from Web SQL using AngularJS.

If you know the solution, could you please let me know?

↓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('Alert here')

    varstoreList=[];

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

    alert('You don't see alerts here')

    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 (vari=0;i<result.rows.length;i++){
                storeList.push({'id':result.rows.item(i).id.toString(), 'name':result.rows.item(i).name.toString()});
            }

            //// ↓ "1234" is displayed as an alert
            // alert(result.rows.item(0).id.toString());

            //※※※ ↓ I want to display this array on page1.html*
            return storeList;

        });
    }); 

};

↓ index.html

<!DOCTYPE HTML>

<htmlng-app="myApp">

<head>
  <metacharset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scale=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>

Thank you for your cooperation.

monaca onsen-ui angularjs web-sql

2022-09-30 19:46