could not update a variable in an angular service with ajax response data and use is to filter

Haitham Zoabi Published at Dev

Haitham Zoabi

i'm using the same code from this article (internationalization with angularjs) ... but i need the "tables" variable to be fetched from an ajax request response using "$http get" but couldn't !! ... here is the code,

var xlat = angular.module('xlat', []);

xlat.factory('xlatService', function ($http) {
    var currentLanguage = 'en';
    // var tables = $.extend(true, {}, initialXlatTables);
    var tables = {
        'en': {
            'textKeys.events': 'Events'
        }
    };

    var service = {
        getData: function () {
            var req = {
                method: 'GET',
                url: 'local/en_US.php',
                cache: true,
                headers: {
                    'Content-Type': 'json'
                }
            };

            $http(req).success(function (data) {
                tables = data;
            });
        },
        setCurrentLanguage: function (newCurrentLanguage) {
            currentLanguage = newCurrentLanguage;
        },
        getCurrentLanguage: function () {
            return currentLanguage;
        },
        xlat: function (label, parameters) {
            service.getData();     
            if (parameters === null || $.isEmptyObject(parameters)) {
                return tables[currentLanguage][label];
            } else {
                return $interpolate(tables[currentLanguage][label])(parameters);
            }
        }
    };

    return service;
});

but the variable "tables" does not change when i use the filter...

var xlat = angular.module('xlat', []);    
xlat.filter('xlat', ['xlatService', function (xlatService) {         
            return function (label, parameters) {
                return xlatService.xlat(label, parameters);
            };
        }]);

lujcon

Try this one:

var xlat = angular.module('xlat', []);    
xlat.filter('xlat', ['xlatService', function (xlatService) {         
    function myfiler(label, parameters) {
        return xlatService.xlat(label, parameters);
    };
    myfiler.$stateful = true;
    return myfilter;
}]);

Stateful filters - https://code.angularjs.org/1.3.9/docs/guide/filter

Secod: you should load tables in factory method not in xlat function.

Collected from the Internet

Please contact [email protected] to delete if infringement.