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

Stack two · Accepted Answer · 2015-02-26 04:10:16Z

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.

Ravi Babu Karikati · Accepted Answer · 2015-02-26 12:34:46Z

1

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


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

    });

edited Feb 26, 2015 at 12:34

answered Feb 25, 2015 at 13:04

Ravi Babu Karikati

2622 silver badges10 bronze badges

5 Comments

Ravi Babu Karikati Over a year ago

use ng-repeat in html

Stack two Over a year ago

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 Over a year ago

My controller is set in the route

Ravi Babu Karikati Over a year ago

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

Ravi Babu Karikati Over a year ago

I am posting that in answer

Collectives™ on Stack Overflow

Fetch and display data from database in AngularJs

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related