Accessing and using JSON within an Angular service for logic flow

Question

I asked the wrong question yesterday (and got a goodanswer that worked), but am realizing it's not what I needed. I need to be able to retrieve JSON data (preferably once), store it, and access it throughout my service. The challenge I'm having is that all the examples I can find talk about using JSON and passing to the app/controller, whereas in this case I need to get it, check it, and then it dictates what my module/service does.

For instance, I have my App and Controller, and then I have a module such as (this is psuedo-code, not meant to run):

angular.module("myModule")

.service("myService1", function($q, myService2, $http) {
    this.getModel = function() {
        return {
            title: "My Title",
            desc: "My Desc"
            options: function () {
                if (condition A)
                    return "option1";
                else 
                    return "option2";
            }
        };
    };
})
.service("myService2", function($q, $http) {
    this.getCfgInfo = function () {
        var defer = $q.defer();
        $http.get("my/json/url").then(function(response) {
            defer.resolve(response.data);
        });
        return defer.promise;
    };
})

In this example, I'm wanting to get the JSON, and use it within myService1 for both literal values (title, desc) as well as for conditions (condition A within the if).

I know I can do something like this (thanks to Joel for helping yesterday):

service("myService1", function($q, myService2, $http) {
    // get a promise object for the configuration info
    var cfgProm = rtDataMapper.getCfgInfo()
    this.getModel = function() {
        return {
            title: cfgProm.then(function(response) {
                        return response.JSON_NAME;
                    }),

and it works fine as I've got the title mapped back into my model and there is a watch(), but I'm stumped as to how I get, store, and use the JSON within the service itself as a conditional (i.e. if (condition A) where condition A is coming from the JSON. Trying to wrap these in .then() doesn't seem to make sense, or at least I can't figure out how to do it.

I'm new to Angular and am attempting to modify some code that was left to us. I'm guessing I don't need the myService2 just to get the JSON. Can anyone help point me in the right direction? I've spent several hours online but can't seem to find a relevant reference/example.

Thanks

Answer 1

Live demo (click).

I'm having the service immediately get the data when it is injected (that code will only run once no matter how many times you inject it). That's nice because you won't have to call a function to get the data - it's called for when creating the service.

Your service method that returns that data will need to return the promise of the data, of course, since you aren't guaranteed that it will have come through when you ask for it. You can pass arguments to that method to use to determine your conditions. All you need to do for that is use promise.then in the method and resolve the promise with the modified data. Since that method is returning the promise already, the modification will be updated on the resolve. See all of this below and in the demo.

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

app.controller('myCtrl', function($scope, myService) {
  myService.getData(15).then(function(data) {
    $scope.myData = data;
  });
});

app.factory('myService', function($q, $timeout) {
  //this code only runs once when you first inject the service
  //get data immediately
  var deferred = $q.defer();

  $timeout(function() { //simulate ajax call
    var data = { //ajax response data
      foo: 15,
      bar: 'Some data!'
    };
    data = modifyData(data, 1);
    deferred.resolve(data);
  }, 500);

  function modifyData(data, fooVal) {
    if (data.foo === fooVal) {
      data.baz = 'Conditional data!'; 
    }
    return data; 
  }

  var myService = {
    //data can be modified when it comes from the server,
    //or any time you call this function
    getData: function(fooVal) {
      if (fooVal) { //if you want to modify the data
        deferred.promise.then(function(data) {
          data = modifyData(data, fooVal);
          deferred.resolve(data);
        });
      }
      return deferred.promise;
    }
  };
  return myService;
});