Angular service array empty

Question

I am trying to store JSON's data in a shared array within a service. The problem is that every time I want to update the service's array with some new content (e.g. new JSON), I need to first clear the array and after that the array remains empty, instead of loading new data.

My service looks like this:

.service('jsonTest',
    function() {
      var json = [];

      function storeJson(file) {
        json=[];
        json.push(file);
      }
      return {
        storeJson: storeJson,
        showJson: json
      }
    });

As you can see, I am cleaning the array each time before loading new data with

json = [];

But then it still remains empty after loading new stuff.

What am I doing wrong here?

You can check that example here: http://plnkr.co/edit/tN9WvNminw1uLpThWPvu?p=preview The service is in app.js and is being used in MainCtrl (main.js) and ProductCtrl (product.js).

Any advice please?

tandrewnichols · Accepted Answer · 2015-04-27 16:14:25Z

1

You're not watching json and updating showJson each time it's changed. You need to do something like:

.service('jsonTest', function() {
  var json = {
    showJson: [],
    storeJson: function(file) {
      json.showJson=[];
      json.showJson.push(file);
    }
  };

  return json;
});

Because json is a local variable, when you set it equal to [] inside storeJson, it's using a new memory location, i.e. it's not a reference variable, so showJson is not automatically updated. If you were clearing the existing array (maybe by .pop until there are no elements left), it would work, but since you're assigning a new empty array, it doesn't.

Alternatively, you could also make showJson a function that returns json. That would also work.

.service('jsonTest', function() {
  var json = [];

  function storeJson(file) {
    json=[];
    json.push(file);
  }
  function showJson() {
    return json;
  }
  return {
    storeJson: storeJson,
    showJson: showJson
  }
});

edited Apr 27, 2015 at 16:14

answered Apr 27, 2015 at 16:09

tandrewnichols

3,4561 gold badge31 silver badges33 bronze badges

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

1 Comment

Lekasp Over a year ago

Now I see where the issue was ;) Thank you!

Dominic Scanlan · Accepted Answer · 2015-04-27 16:26:15Z

1

i think you should be using an empty object rather than an array.

.service('jsonTest', function() {
    var json = {};
    return {
        set: function(val){
            json = val;
        },
        get: function(){
            return json;
        }
    };
});

Updated you're Plunker

edited Apr 27, 2015 at 16:26

answered Apr 27, 2015 at 16:17

Dominic Scanlan

1,0091 gold badge6 silver badges12 bronze badges

Comments

daxeh · Accepted Answer · 2015-04-27 16:20:53Z

Perhaps, a better structure is to move $http calls to service itself, so its truly a service. Tben inject the service into MainCtrl.

So, you can invoke service (lets call it 'myAppService') like:

 .controller('MainCtrl', ['$scope', '$log', 'myAppService',
    function ($scope, $log, myAppService) {

       $scope.getData = function(filepath) {
          // do something with results ie. store etc.
          var fileOrPromise = myAppService.get(filepath);
       };
 ]);

and a service/factory:

 .factory('myAppService', ['$http', '$q', '$window',
    function($http, $q, $window) {
      return {
          get: function(filepath) {
             return _goGetFile(filepath);
          },
          // do something else
      };
    }
  ]);

Here is some references to design and best practices:

Hope this helps.

Collectives™ on Stack Overflow

Angular service array empty

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related