CODEWITHSUNDEEP
javascriptangularjsweb-sqlionic-framework
Peril
Peril

Reputation: 1599

WebSQL empty array after execution

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;
        },

Upvotes: 0

Views: 676

Answers (2)

Polochon
Polochon

Reputation: 2219

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
})

Upvotes: 1

Vivek Tailang
Vivek Tailang

Reputation: 1

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.

Upvotes: 0

Related Questions