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

Tips for including an authorization token in an HTTP request

I encountered a 401 unauthorized error when trying to access my REST endpoint, likely due to the security measures I have implemented. I suspect that there might be an issue with how I am handling the HTTP headers. The application utilizes a Spring Boot b ...

Perform an HTTP GET request to a RESTful service with specified parameters using Angular 2

I'm currently facing an issue while attempting to create a GET request to the YouTube Web API. I'm struggling with passing parameters through the http.get function and have confirmed the request is being sent using Fiddler. However, I keep receiv ...

Typescript library available as a private npm dependency

I have developed a Typescript library that I bundle as an npm module. During the development of my frontend application, I easily integrated this library using yarn link. As I set up GitLab CI for other developers to work on the frontend application, I am ...

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

Ways to deselect checkboxes with Typescript and Jquery

I have a set of checkboxes all labeled with the same 'types' class. There is a button on my webpage that should be able to toggle between selecting and deselecting all the checkboxes in this group. When checking the boxes, I use the following sc ...

What is the best way to retrieve an ng-model parameter within a controller?

I'm working on implementing a PUT method in my controller and need to bind the new value back to it. I've tried: <div ng-app="myApp" ng-controller="personCtrl"> <form> First Name: <input type="text" ng-mod ...

Issue: The module '@nx/nx-linux-x64-gnu' is not found and cannot be located

I'm encountering issues when trying to run the build of my Angular project with NX in GitHub Actions CI. The process fails and displays errors like: npm ERR! code 1 npm ERR! path /runner/_work/myapp/node_modules/nx npm ERR! command failed npm ERR! c ...

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

What is the best way to update a specific column value in a table using AngularJS?

How can I achieve opening a specific row's text-area when clicking the "Add_Note" button inside a table column, without affecting all other rows? I want to show them using index value while using ng-repeat. var myApp = angular.module('myApp&ap ...

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...

Limit your search by selecting a specific category from the dropdown menu

I am new to AngularJs and I am experimenting with filtering data using a dropdown menu that filters by only one field: <select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id"> </select> <ul> <li ng ...

Getting an error in React when using Typescript with a functional component? The issue might be that you are trying to assign a type 'boolean' to a type 'ReactElement<any, any>'

Recently, I set up a project that utilizes TypeScript in conjunction with React. As part of the project, I created a Layout component that relies on the children prop. Below is the current code snippet: import React from 'react'; type LayoutProp ...

Experimenting with code within a window event listener function

I have a component in my AngularJS application that is functioning correctly. However, when it comes to test coverage, everything after the 'window.addEventListener('message',' part is not being covered. Should I create a mock object f ...

Textarea not displaying default values when ng-model is applied

My Angular application includes a textbox in the following format: <div class="panel-body text-center"> <textarea id="mytext" class="form-control" rows="4">John,2 Jane,3 John,4 Jane,5 </textarea> </ ...

A special term in Typescript that consistently points to the present object within the class

Is it feasible to utilize a reference to the current instance of a class in Typescript, similar to "this" in C# and Java, rather than the typical binding context interpretation in JavaScript? ...

Transitioning my website to incorporate Angular JS

Recently, I have been exploring AngularJS and I am quite impressed with its features. I am currently developing a website using traditional methods (php, html, css, mysql, some jQuery) and I am considering transitioning to Angular. The reason for this chan ...

Is ngwebdriver compatible with Appium for testing iOS applications?

Our team is currently working on a Cordova angular mobile app and looking to implement automation testing. Since we are not well-versed in javascript, we prefer not to use the protractor tool. Is it possible to utilize ngWebDriver with appium and seleniu ...

Issues with Ionic 3 Directive Not Functioning

Struggling to create a custom directive in Ionic that won't resize automatically? I can't figure out what's going wrong. Here's the code snippet from my project, which is an Ionic 3 app with Angular 4: import { Directive, HostListener ...

ERROR: Unable to call function getTime in Typescript

While working on my function in Typescript, I encountered an issue with two sets of data in the database - date and time, both expecting strings. When users select a date, I trigger a POST request to set the time for them. To handle this scenario, I creat ...