The HTTP post method in Angular 2 fails to properly send data to request.JSON within a Grails Action

Having trouble retrieving data from request.JSON passed through an Angular 2 HTTP POST method.

The Grails action is being triggered, but the request.JSON is consistently empty {} even when data is passed.

ANGULAR2: HTTP POST Method:

return this.http.post('http://localhost:8080/test/saveStatus', { status: 'Test' })
  .map((response: Response) => response.json());

Grails Action:

class TestController {

    def saveStatus() { 

        def request = request.JSON
        /*
         other codes...
        */
    }

}

Answer №1

Give this snippet a try to send the information to the controller

 sendData() {
            let url = `http://localhost:8080/test/saveInfo`;
            let info = "Test Info";
            let data = JSON.stringify(info);
            return this.http.post(url, data)
                .map(response => response.json())
                .catch(this.handleError);
        }


 def saveInfo([FromBody]string info) { 

        def request = request.JSON
        /*
         additional codes...
        */
    }

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

What is the recommended approach for managing state in React when multiple components are trying to access and modify its data at the same time?

Issue: I am experiencing difficulty in adding new keys and/or values to the JSON editor or YAML editor when they both share and update the same state. The parent component sends JSON data to the child component through props import * as React from 'r ...

The mat-select choices are experiencing rendering issues

This is the HTML code I am using to display select locations and a map below it: Here is the HTML code for the above view, <mat-form-field class="locationSelector"> <mat-select placeholder="Choose location" (ngModel)="ServiceLocations"> ...

The error message states: "There is no property named 'controls' on the type 'AbstractControl<any, any>'"

I have encountered an issue with my reactive form on Angular versions above 13. Despite using FormGroup and FormArray with proper typecasting, I am still facing errors. How can I resolve this? Working code in Angular 11: here Error shown in Angular 15: h ...

Unable to perform a default import in Angular 9 version

I made adjustments to tsconfig.json by adding the following properties: "esModuleInterop": true, "allowSyntheticDefaultImports": true, This was done in order to successfully import an npm package using import * as ms from "ms"; Despite these changes, I ...

Interactive feature on Google Maps information window allowing navigation to page's functions

Working on an Angular2 / Ionic 2 mobile App, I am utilizing the google maps JS API to display markers on a map. Upon clicking a marker, an information window pops up containing text and a button that triggers a function when clicked. If this function simpl ...

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

Having success loading JSON with AJAX in a local browser, however encountering issues when attempting to do so within the PhoneGap

When I try to load external JSON-data locally in my browser, it displays the data successfully. However, when using a cloud-based build service like PhoneGap for iOS and Android apps, the page loads but without the JSON-data appearing. Can anyone provide a ...

Tips for implementing constraints in Angular 8 route parameters

In my Angular web application, I am in the process of configuring routes with parameters. How can I add constraints to ensure only specific IDs are allowed? Below is the path defined in my 'app-routing.module.ts' file: {path: 'post/:id&apo ...

One question I have is how I can successfully send a value within the RxJS subscribe function

I am currently in the process of transitioning the code to rxjs Here is my original code snippet. userAuth$: BehaviorSubject<ArticleInfoRes>; async loadArticleList(articleId: number) { try { const data = await this.articleApi.loadArticl ...

403 Error: Access Denied for Spring Cloud Gateway

Scenario In the development of my project, I have opted for a MicroServices architecture. Specifically, I am utilizing Angular 15 for the Frontend and Spring 3.0.2 as the Backend technology. To manage authentication for both the frontend and backend, I ha ...

show a div above the ngx-mapboxgl map

Trying out ngx-mapbox-gl in an angular 7 app for the first time and encountering an odd issue with the map. The goal is to have some text and a button displayed on top of the map. Following a sample code found online closely, but the div doesn't show ...

Java implementation for arrays containing nested JSON objects

Struggling to figure out the structure for creating model classes to parse Json data from Alpha Vantage API. The format of the Json is as follows: { "Meta Data": { "1. Information": "Daily Time Series with Splits and Dividend Events", "2. Symbo ...

Encountering "module not found" errors while working on an Angular 2 project using the angular2-seed starter pack

Recently, I upgraded to the latest version and integrated SASS according to the guidelines provided here: https://github.com/mgechev/angular2-seed/wiki/Enabling-SASS-support However, upon running npm start, I encountered a series of errors: [18:07:51] & ...

Troubleshooting Issue: Relative Paths Fail to Work with routerLink in Angular 6

I seem to be encountering a problem with the Angular app I'm currently developing. It appears that when using relative paths with routerLink throughout the application, it fails to work properly. There are no errors thrown and the navigation does not ...

Tips on sending various properties to makeStyles() using TypeScript

After learning how to pass 1 prop to makeStyle() from a resource, I decided to try passing in 2 props for my project. However, I encountered an error stating cannot find name 'props'. Any assistance on this issue would be greatly appreciated! con ...

Having trouble figuring out the process of mapping and showcasing data within a React application

On my backend server, I have data displaying in the following format: https://i.stack.imgur.com/f0bfN.jpg I am looking to present this data on my frontend react app. I have attempted the following so far- import {useState, useEffect} from 'react&a ...

Deciphering unconventional JSON into an array or object

Here is a sample string that needs to be converted into an array: ['key1':'value1', 2:'value2', 3:$var, 4:'with\' quotes', 5:'with, comma'] The desired array format should look like this: $pars ...

Identifying modifications made by Firebase SDK within Angular 2

While working on my project, I have been utilizing AngularFire2. However, I've encountered limitations in certain functionalities like password changing for Auth, which are not yet available in AngularFire2. As a result, I have resorted to using the F ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

What is the best way to determine if a user is connected to the internet using Angular2?

Is there a way to check for internet connectivity in Angular 2 when hitting an API? Sometimes, the user may be offline when accessing the server through the app. Are there specific status codes or methods to determine internet connectivity? Note: I came a ...