Passing a Complex Parameter into a Query in AngularJs

Question

I have seen 100 examples of passing an ID into $resource.get() in order to query information out of a back-end in Angular. What I have not been able to find is how to pass a complex object.

If I have a table of objects to return, and I wish to run a search against them using multiple items of filter, I need to pass those items as parameters or as one complex parameter. For example, say I have a table of people's names and their cities, states, etc. I want to be able to say something like this:

var myResource = $resource(url);
myResource.get({name : "Mike", state : "Texas"});

The return may be a single row or multiple rows. But the point is how do I get the parameters off to the API call?

The way I have other methods set up that are simpler is by creating a repository in which I return like so:

return resource('/api/broker/productionInfo/');

Then in my API I do this (after the [RoutePrefix("api/broker")] setup:

[HttpGet]
[Route("productionInfo")]
public IHttpActionResult GetProductions()
{}

That's all awesome but I want to be able to add the search criteria in the repository call and then in the API method (i.e. extract from a querystring or however it is to be passed).

james00794 · Accepted Answer · 2016-03-15 21:46:01Z

1

If I understand what you are asking correctly, you just want to pass additional parameters into an angular resource get request. It is as simple as what you have already suggested:

resource.get({id: 1, custom_param_1: "param1", custom_param_2: "param2"});

This would result in an http request that looks like this:

/resource/1?custom_param_1=param1&custom_param_2=param2

You can then extract these parameters on the API side of things.

Something to note is that get requests have a maximum length, and if you are attaching lots of different parameters to the request, it may be better to use a post or put instead.

answered Mar 15, 2016 at 21:46

james00794

1,1477 silver badges14 bronze badges

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

Comments

Chad · Accepted Answer · 2016-03-16 11:10:47Z

0

The only thing I'm seeing that you're missing is a [FromUri] decorate attribute, in your GetProduction API method. Since Get supports only params binding through a query string (no body binding).

Your params:

options: {
    StartDate: _startDate
    EndDate: _endDate
    TextSearch: "some search query....",
    Page: 1,
    PageSize: 25,
    et...
}

Then, calling your repository from your controller:

repository.get(options).$promise.then(function (data) {
    // data =  response payload from backend
});

reposiroty

....
    return resource('/api/broker/productionInfo/');
....

API

[HttpGet]
[Route("productionInfo")]
public IHttpActionResult GetProductions([FromUri] SearchCriteriaModel criteria) {
    ....
}

Hope that helps.

edited Mar 16, 2016 at 11:10

answered Mar 15, 2016 at 23:06

Chad

836 bronze badges

1 Comment

Mike K Over a year ago

It seems like my missing [FromUri] attribute was the difference-maker.

Collectives™ on Stack Overflow

Passing a Complex Parameter into a Query in AngularJs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related