AngularJS How do I get data from a URL requiring both querystring parms and post data using angular resource?

Question

Requirement: Send data to an endpoint using a post of data and put the startdate and endate into the querystring of the url, like this:

https://server/byLocation?startDate=2019-01-01&EndDate=2020-01-01

The data payload only has the locationIDs and Criteria shown below.

The Resource Definition

I've tried moving the startDate and endate out of the query object as well.

ByLocationResource: $resource(
    ByLocationEndpoint,
    null,
    {
        query: {
            startDate: '@startDate',
            endDate: '@endDate',
            locationIds: ['@locationIds'],
            Criteria: '@Criteria',
            method: 'POST'
        }
    }
),

The EndPoint Definition

var ByLocationEndpoint = https:/servername/byLocation/?startDate=:startDate&endDate=:endDate');

How do I combine querystring in the URL endpoint along with the post data?

The Service:

    function ByLocation(startDate, endDate, Criteria, locationIds) {
        _ByLocationResource.query(
            {

                startDate:startDate,
                endDate:endDate,
                locationIds: [locationIds],
                Criteria: Criteria


            });


    }

I've tried mixing things up a bit lilke this:

function ByLocation(startDate, endDate, Criteria, locationIds) {
        _ByLocationResource(startDate,EndDate).query(
            {

                locationIds: [locationIds],
                Criteria: Criteria


            });


    }

Am I forced to use $http instead of an endpoint and resource?

The browser receives a 400 bad request which looks like this:

Request URL: https://servername/bylocation/?startDate=&endDate=

Clearly the startDate and endDate parms are not being filled in.

The query string that you want is illegal. There should be only one question mark in a query string. — georgeawg, Feb 20 '19 at 21:51
Search parameters should not be in the URL template. Each key value in the parameter object is first bound to url template if present and then any excess keys are automatically appended to the url search query after the `?`. — georgeawg, Feb 20 '19 at 22:05
The query action is also malformed. Why are you trying to use ngResource instead of using the $http service? What benefit do you hope to gain? — georgeawg, Feb 20 '19 at 22:12
The standard verb to POST with ngResource is `save`. The `query` verb is the standard for retrieving an array of resources from a RESTful API. — georgeawg, Feb 20 '19 at 22:17
Ok I corrected the bad example of the requirement adding the '&' char. The name 'query' was picked because we are getting data, not saving it, using the verb save didn't seem right to us. Is the URL Template the endpoint definition shown above? We are using the resource pattern because it's the pattern of our entire inherited project. Maybe I need to go to $http. I think you are saying I need to move the dates out of query obj. in resource def? — JWP, Feb 20 '19 at 22:38
You should probably change the title of the question to "How do I GET data ... ...". — georgeawg, Feb 20 '19 at 22:53

score 0 · Accepted Answer · answered Feb 22 '19 at 18:13

The proper way to use AngularJS Endpoints with QueryString and Post data

This is the proper templating resource pattern:

ByLocationResource: $resource(

    ByLocationEndpoint,
    {
        startDate: '@startDate',
        endDate: '@endDate'
    },
    {
        query: {

            Criteria: '@Criteria',
            locationIds: '@locationIds',
            method: 'POST',
            isArray: true
        }
    }
),

And this is the call pattern, the first two parms fill in the query string parameters for the endpoint, while the 2nd set of parameters fill in the Post data. We named the method query, because we are querying data based on the post parameters, whereby the results are constrained by the Query String by start and end date.

MyService.ByLocation(
    {
        startDate: startDateTime,
        endDate: endDateTime
    },
    {
        Criteria: {

            Id: Id,
            Minutes: Minutes,
            Id2: Id2
        },
        locationIds: [5, 6, 7, 8]
    }
);

The code in the MyService service calling the query method.

function ByLocation(dates, payload) {

    return ByLocationResource.query(dates, payload).$promise;
}

AngularJS How do I get data from a URL requiring both querystring parms and post data using angular resource?

1 Answers1