Fetch and display data from database in AngularJs

Question

How can I pop the list of my clients on the screen, the list is coming from my database, I have 11 rows of clients and I want to create a listview of those and show them, this is my code:

dbFactory.method = function findAll() {
    db.transaction(
        function(tx) {
            var sql = "SELECT (nome) as nomes FROM clientes";
            log(sql);
            tx.executeSql(sql, [],
                function(tx, results) {
                    var len = results.rows.length,
                        clientes = [],
                        i = 0;
                    for (; i < len; i = i + 1) {
                        clientes[i] = results.rows.item(i).nomes;
                    }
                    log(clientes + '  found');


                }
            );
        },txErrorHandler,
        function () {

        }
    );

};

Controller:

 .controller('ListaCtrl', function ($scope, dbFactory) {


         $scope.items = dbFactory.method();
         console.log(dbFactory.method());


    });

clientes.html:

<ion-view view-title="Playlists" ng-app="starter">
  <ion-content>
    <ion-list>
  <ion-item ng-repeat="itens in items" >

      <p>{{itens.nome}}</p>

  </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

The log:

 Promise {$$state: Object, then: function, catch: function, finally: function}
$$state: Object
status: 1
value: SQLResultSet
insertId: [Exception: DOMException: Failed to read the 'insertId' property from 'SQLResultSet': The query didn't result in any rows being added.]
rows: SQLResultSetRowList
length: 11
__proto__: SQLResultSetRowList
rowsAffected: 0

Solution 1

I've managed to solve that using deferred and promise, here is what I did:

var getMessages = function findAll() {
            db.transaction(
                function(tx) {
                    var sql = "SELECT (nome) as nomes FROM clientes";
                    tx.executeSql(sql, [],
                        function(tx, results) {
                            var len = results.rows.length,
                                clientes = [],
                                i = 0;
                            for (; i < len; i = i + 1) {
                                clientes[i] = results.rows.item(i).nomes;
                            }
                            log(clientes + ' rowsss found');
                            deferred.resolve(clientes);

                        }
                    );
                },txErrorHandler,
                function () { }
            );
            return deferred.promise;

        };

        return {
            showClientes: getMessages
        };

The Controller:

.controller('ListaCtrl', function ($scope, dbFactory) {

        dbFactory.showClientes().then(function(listview) {
            $scope.clientes = listview;
            console.log($scope.clientes);
        });

    });

And the html:

<ion-view view-title="Playlists" ng-app="starter">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="cliente in clientes">

          {{cliente}}

      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

Now I can see my listview with all my clients.

Solution 2

 .controller('ListaCtrl', function ($scope, dbFactory) {


        dbFactory.method().$promise.then(
                 function(res){
                       $scope.items = res; //or res.data
                 },
                 function(){
                      //error call back
                 }
         );

    });

Comments

[Ravi Babu Karikati]

use ng-repeat in html

[Stack two]

Thank you for your help, I did it like so: <ion-item ng-repeat="itens in items " > <p>{{itens}}</p> </ion-item> but I got nothing showing

[Stack two]

My controller is set in the route

[Ravi Babu Karikati]

I understand ur problem...that is returning a promise..U have to resolve that promise inside controller...

[Ravi Babu Karikati]

I am posting that in answer