angular $http.put() works but $http({method: 'PUT'}) does not

Question

I am trying to consolidate all my services which make api calls to the Rails back end into one. Here's what it looks like:

angular.module('feeSuitesApp')
  .factory('FeeSuitesSvc', [
    '$http',
    function ($http) {
      var TransformInstance, Result;

      TransformInstance = function(FeeObj, obj){
        return new FeeObj(obj);
      };

      Result = function(feeSuiteObj){
        var servicePlural = feeSuiteObj.service + 's';
        return $http({
          method: feeSuiteObj.method,
          url: feeSuiteObj.url,
          params: feeSuiteObj.params,
          transformResponse: function(data){
            var w = angular.fromJson(data);
            angular.forEach(w[servicePlural], function(obj, idx){
              w[servicePlural][idx] = TransformInstance(feeSuiteObj.feeObj, obj);
            });
            return w;
          }
        })
      }

      return {
        promise: Result,
      };
  }]);

POST and GET work fine, but PUT gives me a RangeError: Maximum call stack size exceeded

FeeRule looks like this:

angular.module('feeSuitesApp')
  .factory('FeeRule', function(){
    //constructor
  var FeeRule = function(obj){
    this.id = obj.id || null;
    this.name = obj.name || '';
    this.fee_suite_id = obj.fee_suite_id || null;
    this.fee_parameter_id = obj.fee_parameter_id || null;
    this.multiplier = obj.multiplier || 1;
    this.addend = obj.addend || 0;
  };

  return FeeRule;
});

however, if I make the following call everything works perfectly:

var url = '/api/v3/fee_rules/' + feeRule.id;
$http.put(url, { fee_rule: feeRule});

but if I use my service like this I get the stack overflow error:

var feeSuiteObj = {
  url: '/api/v3/fee_rules/' + feeRule.id,
  service: 'fee_rule',
  method: 'PUT',
  params: {
    fee_rule: feeRule
  },
  feeObj: FeeRule
};

FeeSuitesSvc.promise(feeSuiteObj).then(function(success){
    $state.go('root');
  },function(error){
    console.log(error);
  });

what is `service` and `feeobj` and where is `data`? Object doesn't match docs. `params != data` — charlietfl, Sep 29 '16 at 17:37
as per your error (RangeError) I guess your problem is being raised from here: "angular.forEach(w[servicePlural],". see more http://stackoverflow.com/a/22123896/335905 — celerno, Sep 29 '16 at 17:38
Just an fyi but you can consolidate using the $resource library. In my project at work we have api calls constructed like the following where we can call GET, POST, PUT. function deleteTnApi($resource) { return $resource('/:api/orderNumber/:someNumber/orderVersion/:version', null, { 'update': {method: 'PUT'} }); — Ronald91, Sep 29 '16 at 19:09

score 0 · Answer 1 · answered Sep 29 '16 at 17:46

see https://docs.angularjs.org/api/ng/service/$http#usage, there is no service nor feeObj config properties, also params is used to append serialized data to GET requests (not PUT). So try this:

var feeSuiteObj = {
  url: '/api/v3/fee_rules/' + feeRule.id,
  method: 'PUT',
  data: {
    fee_rule: feeRule
  }
};

if you need to pass service or feeObj, you can do it within data object:

data: {
  fee_rule: feeRule,
  service: 'fee_rule',
  feeObj: FeeRule
}

angular $http.put() works but $http({method: 'PUT'}) does not

1 Answers1