WebSQL empty array after execution

Question

I am trying to return the array I got from the database using websql but its empty.

angular.module('starter.services', [])
    .factory('Products', function() {
      var db = openDatabase('db', '1.0', 'DB',5 * 1024 * 1024);
      return {
        all: function(subId) {
           var products = [];
           db.transaction(function (tx) {
           tx.executeSql('SELECT * FROM products where category_id ='+subId, [], function (tx, results) {
           var len = results.rows.length, i;
           for (i = 0; i < len; i++){
              products.push(results.rows.item(i));
              console.log(products);// this will print out the products
           }
           }, null);
          });
          console.log(products);// empty
          return products;
        },

Polochon · Accepted Answer · 2014-08-04 12:43:46Z

It's seem to be a simple async issue.

You try to access to an array not already filled, try to use the $q service provided by angular.

angular.module('starter.services', [])
    .factory('Products', [ '$q', function($q) {
        var db = openDatabase('db', '1.0', 'DB',5 * 1024 * 1024);
        return {
            all: function(subId) {
                var defer = $q.defer();

                var products = [];
                db.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM products where category_id ='+subId, [], function (tx, results) {
                        var len = results.rows.length, i;
                        for (i = 0; i < len; i++){
                            products.push(results.rows.item(i));
                        }
                        //filled
                        $q.resolve(products);

                    }, null);
                });
                return defer.promise;
            },
            ...

And if you want to use the products array

Product.all(/**subId**/).then(function(products) {
//some actions
})

Vivek Tailang · Accepted Answer · 2014-08-04 12:37:38Z

This is new for me to write the query inside client side layer. Instead of this i suggest you to either create the webservices and call the link through creating the service layer in JS which will hold only server side action URL or using the Server side framework to return the product list. You can create the service/provide to do with the following code:

module.service('productlistfetchservice', function() {
    this.productList = function($http, $scope) {
        $http({
            method : 'POST',
            url : '/productlist.action'
        }).success(
                function(data, status, headers, config) {
                    $scope.gridproductlist = data;      
                }).error(function(data, status, headers, config) {
                    alert("Error");
                });
    };
});

$scope object set the product list array for the html page under angularjs code.

Collectives™ on Stack Overflow

WebSQL empty array after execution

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related