How to create a Angular.js $resource/$http factory service to handle a query string with multiple parameters from an external resource?

Question

How could a factory $resource or $http service be created to handle a query string with multiple arbitrary parameters from an external resource? eg.

#/animals
#/animals?gender=m
#/animals?color=black
#/animals?size=small
#/animals?gender=m&color=black
#/animals?size=med&gender=f
#/animals?size=lg&gender=m&color=red

The idea is that there are buttons/inputs which the user can press to add to the current list of parameters in the query string to get a new list of animals with the desired properties in different combinations. I have tried the following but it doesn't reload or add new parameters to the existing url as desired. Also, I'm not sure if $route.current.params should be called in the controller or the factory and if that's the best way to do it.

angular.module(Animals, ['$resource', '$route', '$location', function($resource, $route, $location) {
  return $resource('http://thezoo.com/animals', $route.current.params, { query: {method: 'GET', isArray: true}});
}]);

Thanks :)

Chris · Accepted Answer · 2015-01-07 15:39:02Z

10

If the parameters you pass in when you call the resource don't match any of the placeholders specified in the url, they're automatically converted to query string params. So you should do something like:

angular.module(Animals, ['$resource', '$route', '$location', function($resource, $route, $location) {
  return $resource('http://thezoo.com/animals', { query: {method: 'GET', isArray: true}});
}]);

and then when you try to use it, you can do:

Animals.query({size:"med",gender:'f'});

and it'll get translated to:

http://thezoo.com/animals?size=med&gender=f

edited Jan 7, 2015 at 15:39

answered Aug 27, 2013 at 20:54

Chris

23.2k4 gold badges58 silver badges50 bronze badges

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

3 Comments

Cliff Coulter Over a year ago

Thank you - I believe this will work great! Of course, it looks so obvious now that you've showed how. I posted a follow up question here :

suhailvs Over a year ago

i think {size="med",gender='f'} is wrong. {size : "med", gender:"f"} is the correct format, isn't it??.

Karlie Verkest De Young Over a year ago

Isn't there a missing argument there? I think it should be return $resource('http://thezoo.com/animals', {}, { query: {method: 'GET', isArray: true}}); (notice the extra empty object)

Collectives™ on Stack Overflow

How to create a Angular.js $resource/$http factory service to handle a query string with multiple parameters from an external resource?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related