How to pass json object as GET using $resource in angular?

Question

How to pass json object to WebApi as GET using $resource in angular?

My service:

pmsService.factory('Widgets', ['$resource', function ($resource) {

    var data = $resource('/api/:path/:id', {
        path: '@path'
    }, {
        getWidgets: {
            params: { path: 'widgets' },
            method: "GET",
            isArray: true
        },
        getWidget: {
            params: { path: 'widgets' },
            method: "GET",
            isArray: false
        },
        getWidgetData: {
            params: { path: 'widgets' },
            method: "POST"
        },
    });
    return data;

In angular controller:

Widgets.getWidgetData({ id: $scope.widget.id}, $scope.paramValues ).$promise.then(function (data) {
                $scope.widget.Data = data;
                $log.debug($scope.widget.Data);
            });

In Controller:

[Route("api/widgets/{id}")]
[HttpPost]
public Object Get(int id, dynamic prms)
   {
     ....
   }

This should sends 2 parameters to WebApi Controller, id and list of parameters for the Widget. Fiddler shows:

/api/widgets/31/%5Bobject%20Object%5D

So routing works correctly, but the object prms I received is empty.

paramValues needs to be an number/string/boolean .. etc. Not an object. If you want to send an object, switch to a POST request — sirrocco
– sirrocco, Commented Nov 17, 2015 at 14:11
I've tried but same thing object is empty, will edit question in the minute — Whistler
– Whistler, Commented Nov 17, 2015 at 15:34

Ernest Okot · Accepted Answer · 2015-11-17 15:34:47Z

1

I don't really understand what you're trying to do there but if you're trying to achieve a url parameter as in /api/widgets/31?foo=bar, then this is how I would do it.

angular
  .module('myMod', ['$resource'])

  .factory('Widgets',
  ['$resource', function ($resource) {
    return $resource(
      '/api/:path/:id/',
      {'path': '@path'},
      {
        getWidgets: {
          params: {path: 'widgets'},
          method: "GET",
          isArray: true
        },
        getWidget: {
          params: {path: 'widgets'},
          method: "GET",
          isArray: false
        },
        getWidgetData: {
          params: {path: 'widgets'},
          method: "GET",
          isArray: false
        }
      })
  }])

  .controller('WidgetsController',
  ['$scope', 'Widgets', function ($scope, Widgets) {
    $scope.widget = Widgets.getWidget({
      id: 1,
      foo: 'bar'
    });
  }]);

That would a make GET request to /api/widgets/1?foo=bar. You can include a nested object or an array like this and it will be serialised and appended to the url

  // In controller
  .controller('WidgetsController',
  ['$scope', 'Widgets', function ($scope, Widgets) {
    $scope.widget = Widgets.getWidget({
      id: 1,
      fields: ['name', 'price']
    });
  }]);

This would make a GET request to /api/widgets/1?fields=name&fields=price. I usually prefer to use the $httpParamSerializerJQLike serializer to serialize the parameters in this form /api/widgets/1?fields[]=name&fields[]=price which in my experience is less problematic. To use this serializer, you need to configure $http like so

angular
  .module('myMod')

  .config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.paramSerializer = '$httpParamSerializerJQLike';
  }])

Hope that helps

answered Nov 17, 2015 at 15:34

Ernest Okot

1,0143 gold badges11 silver badges24 bronze badges

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

7 Comments

Whistler Over a year ago

I want to send Json object which is the list of settings for the Widget. Your example sends string and I need to send object. I think @sirroco is right and I have to use POST, which I have done it and edit the question. Unfortunately this doesn't work

Ernest Okot Over a year ago

the string can be decoded on the server side, am not sure how it's done with asp.net... take a look at this answer to a similar question

Whistler Over a year ago

I got an answer for the MVC, I'm porting app to WebApi and this bit doesn't work

Ernest Okot Over a year ago

as an example Widgets.getWidget({id: 1, settings: {height: 5, width: 6}}) would send a request like so http://admin.etag.bea/api/widgets/1?settings={"height":5,"width":6}

Whistler Over a year ago

I know what you are saying, but when I stringy json object I get : /api/widgets/31/%7B%22LineID%22:%22SH5%22,%22MachineID%22:%227%22,%22DateFrom%22:%222015-10-25%22,%22DateTo%22:%222015-11-01%22%7D

|

Collectives™ on Stack Overflow

How to pass json object as GET using $resource in angular?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related