Using AngularJS $resource to send query strings instead of JSON objects in a POST request (Typescript)

Whenever I create a custom $resource action like this:

getEntityResource(): ng.resource.IResourceClass<IEntityResource> {


       let addAction: ng.resource.IActionDescriptor = {
            method: 'POST',
            url: 'http://localhost:8085/api/entity/add'
        }
        return <ng.resource.IResourceClass<IEntityResource>>
        this.$resource("http://localhost:8085/api/entity/:entityId", { id: '@id' },  {
          add: addAction,  
        });

and execute it from the controller in this manner:

this.$mdDialog.hide(this.dataService
            .getEntityResource()
            .add(this.entity,
            () => this.$state.reload()
        ));

the request is being sent as shown below:

Request URL:http://localhost:8085/api/entity/add?id=0

The webApi endpoint expects an entity object as a parameter rather than an id:

[HttpPost]
public Entity Add(Entity entity)

The issue lies in sending the post request with a string parameter (?id=0) instead of a JSON object.

What could be missing here?

Thank you.

Answer №1

Check out the documentation for $resource.

The issue you're facing is that you're passing the data as the second parameter. To pass the data as a JSON object, you need to follow these steps:

$resource("http://localhost:8085/api/entity/:entityId", 
     {},  
     {params: {id: '@id'}...}
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building an Ionic app from a .git repository on your local machine: A step-by-step guide

Trying to set up Moodle's ionic mobile app on my local machine using Windows and following these steps: cd project-directory ionic platform add android Encountered an error in the command prompt: throw err; ^ Error: Cannot find module ' ...

When configuring the Redux logger, the type 'Middleware<{}, any, Dispatch<UnknownAction>>' is not compatible with type 'Middleware<{}, any, Dispatch<AnyAction>>'

In my React project, I have defined the redux logger with the package version "redux-logger": "^3.0.6" in the file store.ts as shown below: import { configureStore } from '@reduxjs/toolkit'; import rootReducer from '@/re ...

Angular and Laravel API combination for creating a straightforward single page application

I'm looking to develop a straightforward Single Page Application using AngularJS and Laravel 4 as my API backend. The application will consist of basic posts, categories (essentially a blog), and some static pages. My goal is to integrate Laravel&apos ...

When the keyboard appears, the Ionic 2 form smoothly slides upwards

I am currently working with the most recent version of Ionic 2. In my code, I have a <ion-content padding><form></form></ion-content> containing a text input. However, when attempting to enter text on an Android device, the keyboard ...

Monitoring separate upload progress within $q.all() in AngularJS

I recently started using the angular-file-upload module created by danialfarid (https://github.com/danialfarid/angular-file-upload) and I must say, it's been a great experience so far. After successfully integrating it into my wrapper service for RES ...

Is it possible to import a class from a different project or module in TypeScript?

I am attempting to modify the build task in Typescript within this specific project: https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts I am looking to incorporate an import similar to the one be ...

Basic Karma setup with Typescript - Error: x is undefined

I am trying to configure a basic test runner using Karma in order to test a TypeScript class. However, when I attempt to run the tests with karma start, I encounter an error stating that ReferenceError: Calculator is not defined. It seems like either the ...

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

Angular's implementation of deferred only displays the final value in the loop

I've created a personalized synchronization process that queues up all my sync records in sequence. When my service retrieves multiple sync records, it processes them and updates the last sync date for successful records, or logs errors for failed rec ...

There is a potential for the object to be 'undefined' when calling the getItem method on the window's local storage

if (window?.sessionStorage?.getItem('accessToken')?.length > 0) { this.navigateToApplication(); } Encountering the following error: Object is possibly 'undefined'.ts(2532) Any suggestions on how to resolve this issue? I am attem ...

Angular Material's md-colors directive is a powerful tool for creating dynamic gradients

Is it possible to create gradients using the Angular Material md-colors directive? Link to Angular Material mdColors Documentation Appreciate any assistance with this question. ...

What could be causing the error when attempting to retrieve an index using the window variable?

I'm facing a strange issue where I am trying to utilize a variable that I define as follows: window.params['variable'] = { ... }; Within the function that I am using, the code looks like this: function q() { ... // for example return n ...

The AngularJS ngModel directive encounters issues when used within a ui-bootstrap tabset

Check out the code snippet below to see the issue at hand: <!DOCTYPE html> <html ng-app="plunker"> <head> <title>AngularJS Plunker</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/cs ...

Retrieving a result from a function call is a fundamental aspect of programming

I have a scenario where I am initiating a call from a controller within AngularJS. This call passes some data to a service in order to receive a response that needs to be conditionally checked. Controller patents.forEach(function(item){ // The "patents" ...

Troubleshooting TypeScript in Visual Studio Code

Currently, I'm attempting to troubleshoot the TypeScript code below using Visual Studio Code: class Student { fullname : string; constructor(public firstname, public middleinitial, public lastname) { this.fullname = firstname + " " + ...

Can $scope be considered as a dependency in this scenario?

My perspective is this: When you include a controller parameter called $scope, AngularJS recognizes the $scope parameter and generates the $scope object, injecting it into our controller where the $scope parameter was placed. Is injecting that object con ...

Encountered an issue when attempting to include the "for" attribute to a label within an angular 2.0 template

I am currently using Angular 2.0 framework and working on developing an input component. In addition to that, I am also utilizing Google MDL which requires a specific HTML structure with labels for inputs. However, when trying to implement this, I encounte ...

In Angular 5, you cannot assign type 'any[]' to type 'typeof User'

After extracting data from the JSON file, I encountered a typo error message stating: Type 'any[]' is not assignable to type 'typeof User'. Here is my code in app.component.ts: import { Component, OnInit } from '@angular/core&a ...

Exploring how to manipulate and retrieve the URL and its components using angularjs and/or JavaScript

Understanding how to manipulate URLs is an essential aspect of Application Design. For navigating between pages Deep linking Providing users with links Retrieving data via queries Transferring information to other pages Both angularjs and JavaScript off ...

Set up a global variable for debugging

Looking to include and utilize the function below for debugging purposes: export function debug(string) { if(debugMode) { console.log(`DEBUG: ${string}`) } } However, I am unsure how to create a globally accessible variable like debugMode. Can this be ...