title: Use a Factory to parse a REST API response in a Service
body: <p>I have been using Angular.js for a while now, but I stumbled across a piece of code a previous developer wrote on the project I am working on and wanted to know if the usage is correct or if we should probably refactor the calls into whatever the best practice for this is.</p>
  
  <p>The app is quite simple: it is a REST API consumer which provides basic CRUD operations over some of the resources from the API. Problem is: the API is not strictly REST; what I mean is, not all Resources can be fetched as standalone objects and used directly by the app, rather some responses contain nested objects inside them, and some response parsing logic is needed to accommodate the Models used by the app. A very simplified example of what an endpoint might return could be: </p>
  
  <pre><code>{
    "products": [
      {
        "full_name": "Product 1",
        "price": 20000,
        "quote": {
             "downpayment": 3000,
             "interest_rate": 0.049,
         },
         "customer_elegibility": {
             "status": "approved"
         }
      },
      {
        "full_name": "Product 2",
        "price": 15000,
        "quote": {
             "downpayment": 3000,
             "interest_rate": 0.059,
         },
         "customer_elegibility": {
             "status": "rejected"
         }
      },
      ]
  }
  </code></pre>
  
  <p>So the code I came across, consumes the endpoint creating a custom promise like so:</p>
  
  <pre><code>angular.module('quotes').service('quoteService', 
                                      ['$q','$http', 'Product',
    function($q, $http, Product){
      var base_url = "https://my-example-api.com"
      this.getProducts = function (user_id){
        var deferred = $q.defer();
        var endpoint = "/users/"+ user_id +"/products";
        $http({
          url: base_url + endpoint,
          method: "GET"
        }).success(function(data, status, headers, config) {
          var products = [];
          var prod;
          for(var i = 0; i &lt; data.products.length; i++){
            prod = new Product(data.products[i]);
            products.push(prod);
          }
          deferred.resolve(products);
        }).error(function(data, status, headers, config) {
          console.log("Could not load products. Status: " + status);
          deferred.reject(data);
        });
        return deferred.promise;
      };
  }]);
  </code></pre>
  
  <p>Here, the Product "Object" is really created by the chain of the following factories:</p>
  
  <pre><code>angular.module('models').factory('Product',
                                   ['$q','$http', 'Quote', 'Elegibility', 
                                   function($q, $http, Quote, Elegibility){
    var Product = function(data){
      this.name = data.full_name;
      this.elegibility =  new Elegibility(data.customer_elegibility);
      this.quote = new Quote(data.quote);
    };
  
    return Product;
  }]);
  
  angular.module('models').factory('Quote',
                                   ['$q','$http', function($q, $http){
    var Quote = function(data) {
      this.downpayment = data.downpayment;
      this.interest_rate = data.interest_rate;
    };
  
    return Quote;
  }]);
  
  angular.module('models').factory('Elegibility',
                                   ['$q','$http', function($q, $http){
    var Elegibility = function(data) {
      this.status = data.status;
    };
  
    return Elegibility;
  }]);
  </code></pre>
  
  <p>Creating the custom promise via <code>$q.defer();</code> is necessary, since we need to responses of the API into objects the frontend can understand and use. What puzzled me a bit here was encapsulation of the JSON parsing logic inside a factory which gets instantiated on the success callback for the <code>$http</code> call. </p>
  
  <p>The solution seems neat to me and it works quite nicely, yet there is something about instantiating a Factory inside a Service that just doesn't click for me. </p>