The AngularJS $resource is taking the entire object and embedding it into the URL

Question

The AngularJS $resource is taking the entire object and embedding it into the URL

I am currently utilizing Angular version 1.4.8 along with Angular UI and TypeScript in my project. The models are defined as follows:

export interface IBatch extends ng.resource.IResource<IBatch> {
    id: Number;
    ...
}

export interface IBatchResource extends ng.resource.IResourceClass<IBatch> {
    snapshot(batch: IBatch);
}

I have configured my Batch resource to include a custom HTTP verb TAKE-SNAPSHOT, which can return either a 200 OK or a 404 NOT FOUND:

var paramDefaults = {
    id: '@id'
};

var actions = {
    'snapshot': { method: 'TAKE-SNAPSHOT' }
};

return <IBatchResource> this.$resource('/api/batches/:id', paramDefaults, actions);

This setup allows me to take a snapshot of a specific Batch by only providing the batch Id as a parameter for the API call. However, I've noticed that when using $resource, it encodes the entire Batch object into the query string, resulting in a very long URL (the actual length is over 1000 characters, but shortened here for clarity):

localhost:15000/api/batches/4?$originalData=%7B%22id%22:4,%22createdDateUtc%22:%222015-12-...

I am seeking guidance on how to direct the $resource request specifically to localhost:15000/api/batches/4.

javascript angularjs typescript angular-resource angular-http

Answer 1

Answer №1

Here's how I found a solution:

const defaults = {
    id: '@id'
};

const actions = {
    'snapshot': <ActionDescriptor>{ method: 'TAKE-SNAPSHOT' }
};

const result = <IBatchResource> this.$resource('/api/batches/:id', defaults, actions);

/*
 * When passing an object, the entire Batch gets serialized into the URL query string.
 * To only pass the ID, we need to make adjustments as shown below.
 */
const oldFn = result.snapshot;
result.snapshot = (batch: IBatch) => oldFn(<any>{id: batch.id });
return result;

Answer 2

Here's how I found a solution:

const defaults = {
    id: '@id'
};

const actions = {
    'snapshot': <ActionDescriptor>{ method: 'TAKE-SNAPSHOT' }
};

const result = <IBatchResource> this.$resource('/api/batches/:id', defaults, actions);

/*
 * When passing an object, the entire Batch gets serialized into the URL query string.
 * To only pass the ID, we need to make adjustments as shown below.
 */
const oldFn = result.snapshot;
result.snapshot = (batch: IBatch) => oldFn(<any>{id: batch.id });
return result;

The AngularJS $resource is taking the entire object and embedding it into the URL

Answer №1

Similar questions

Are you looking to create a dynamic quiz platform with Angular?

Streaming RTMP video through a WebView

Validator returns undefined when expressing invalid data

Set up SystemJS to properly load my Angular 2 component module

Execute the function right away and then at regular intervals of X seconds

Accessing the transcluded scope of a directive from its preLink method: A beginner's guide

Troubleshooting tips for optimizing Opera and Internet Explorer performance

I'm currently working on a Vue template that incorporates Vuetify, and I am interested in integrating Nuxt.js into the template

The combination of NextJS and Firebase Auth using the GoogleAuthProvider is powerful

The specified type 'Observable<string | null>' cannot be assigned to type 'string'

UI-grid: Triggering a modal window from the filter header template

Utilizing the "apply" method with JavaScript OOP callbacks for dynamic context management

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

Something went wrong: [ERR_UNSUPPORTED_ESM_URL_SCHEME]: The default ESM loader only supports URLs with a scheme of file, data, and node

Mongoose opts for the __v field over a traditional date field

Getting the Request Body Content in Express Middleware

Issue with splitting a JavaScript function in JQuery within the Wordpress platform can cause errors

Tips for automatically expanding all nodes with children when the page loads in the Wix Angular tree control

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

Give a radio button some class