Abubaker Abubaker - 5 months ago 14
Javascript Question

Empty array from factory method in angularjs

Scenario: I have a factory service that has the following code

appServices.factory('MyDB', function ($cordovaSQLite)
{
var FixedCache = [];

return {

getFromCache: function (dataURL, $scope)
{
var query = "SELECT * FROM FixedCache WHERE URI_ID = '"+dataURL+"'";
FixedCache = [];
$scope.dataFromCache = [];

//console.log("Inside Cache method");
// Execute query statement from query variable.
$cordovaSQLite.execute(db, query).then(function (res)
{
if (res.rows.length > 0)
{


var dataItem = {
id : res.rows.item(0).id ,
URI_ID : res.rows.item(0).URI_ID ,
ExpireDate : res.rows.item(0).ExpireDate ,
JSONData : res.rows.item(0).JSONData
};

FixedCache.push(dataItem);
$scope.dataFromCache = FixedCache;


}



});

return FixedCache;

},// End select all data.
};


})

In the controller, I want to get the data by calling this method. Here is the code of controller.

appControllers.controller('categoriesCtrl', function ($scope, $http, $state, $timeout, $stateParams, $ionicHistory, MyDB, UtilityMethods) {

var dataURL = window.globalVariable.constants.URL_API;

$scope.initialForm = function () {


$scope.categoriesFromCache = [];
$scope.categoryCache;


$scope.url = window.globalVariable.constants.URL_API;
$scope.todaysDate = UtilityMethods.GetDate(0);

// $scope.isLoading is the variable use for loading.
$scope.isLoading = false;

$scope.apiUrl = window.globalVariable.constants.URL_API;


};// End initialForm.


$scope.GetFromCache = function (uri, $scope) {


$scope.dataFromCache = [];

MyDB.getFromCache(uri, $scope);
};

$scope.navigateTo = function (targetPage, objectData, apiUrl) {

$state.go(targetPage, {
category: objectData,
apiUrl: apiUrl
});
};



$scope.clearSearch = function() {
$scope.searchByName = '';
};


$scope.goBack = function () {
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go("app.categories", {
isShowError: false
});
};

$scope.initialForm();


$timeout(function () {
$scope.GetFromCache(dataURL, $scope);


}, 3000);// End loading progress.


});

Problem:
When I am calling this method MyDB.getFromCache(uri, $scope); in controller, it is returning empty array []
The database does contains the data.

Please guide me. Am I calling the functions correctly?

Answer

The reason behind your code isn't working is, you are considering async event to work in synchronous way, though additional I want to say passing $scope as an parameter to factory method isn't considered as good practice.

Basically what you need to do is return cordova promise from method & chain that promise inside controller & set scope variable in it.

Factory

getFromCache: function(dataURL) {
  var query = "SELECT * FROM FixedCache WHERE URI_ID = '" + dataURL + "'";
  FixedCache = [];
  //returning cordova promise
  return $cordovaSQLite.execute(db, query).then(function(res) {
    if (res.rows.length > 0) {
      var dataItem = {
        id: res.rows.item(0).id,
        URI_ID: res.rows.item(0).URI_ID,
        ExpireDate: res.rows.item(0).ExpireDate,
        JSONData: res.rows.item(0).JSONData
      };

      FixedCache.push(dataItem);
      return FixedCache; //return data to chained promise
    }
  });
}

Controller

$scope.GetFromCache(dataURL).then(function(data){                
     $scope.dataFromCache = data;
});
Comments