Caching internationalization JSON data in AngularJS

Question

Here i am created multi-language concept in my application its working fine, but language (.json) file loaded for every field, So application taking time to load, my requirement is i want to load .json only once to fetch all the data , how to do in angularJs, Thanks for your help in advance

please check the below link also

http://plnkr.co/edit/PYZxcI5yTNuA0fEern9s?p=preview

var language = 'en';

app.directive('telBasictext', ['$http', 'teli18nservice',
  function($http, teli18nservice) {
    return {
      restrict: 'AEC',
      require: 'ngModel',
      scope: {
        ngModel: '=',
      },
      template: '<div  class="form-group"  > ' +
        '<label  >  {{ setvalue }} </label> ' +
        '<div  > <input type="{{ textboxtype }}" ng-model="ngModel"  ></div></div>',

      link: function(scope, iElement, iAttrs, ngModelController) {
        var collecton = iAttrs.getString;
        var splitValues = collecton.split(",");
        var language = splitValues[0]; // Language EN or Fr
        var labelName = splitValues[1]; // Label Name
        var moduleName = splitValues[2]; // Module Name (global or local)
        teli18nservice.getdata(moduleName).success(function(data) {
            scope.setvalue = data[labelName];
          })
          .error(function(error) {
            scope.setvalue = "No Label";
          });
      }
    };
  }
]);

Here's a solution. It uses the cache of $http.

interested
– interested

2016-01-08 10:04:46 +00:00
Commented Jan 8, 2016 at 10:04 — interested
– interested, Commented Jan 8, 2016 at 10:04

sdgluck · Accepted Answer · 2016-01-08 10:06:26Z

1

Store the result of a request for the JSON locally in your teli18nservice service and return that data for subsequent calls to getdata. It would look something like this:

// teli18nservice
var jsonData;
this.getData = function () {
    if (jsonData) {
        return $q.resolve(jsonData);
    }
    $http.get().then(function (res) {
        jsonData = res.data;
        return jsonData;
    });
}

Alternatively, take a look at caching $http responses.

edited Jan 8, 2016 at 10:06

answered Jan 8, 2016 at 10:05

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giulio Molinari Over a year ago

You anticipated me by 41 seconds! ;)

Community · Accepted Answer · 2017-05-23 12:31:22Z

0

May be you should use the cache of $http.

example taken from here:

var cache = $cacheFactory('myCache');
var data = cache.get(someKey);

if (!data) {
    $http.get(url).success(function(result) {
        data = result;
        cache.put(someKey, data);
    });
}

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jan 8, 2016 at 10:07

interested

3241 silver badge9 bronze badges

1 Comment

interested Over a year ago

I edited my post, but you should really take a look at the link I also posted! You'll find more detailed information.

Collectives™ on Stack Overflow

Caching internationalization JSON data in AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related