Receiving a 400 Error when Angular HttpClient sends a Set<> to a SpringBoot API endpoint

Currently, I have an endpoint set up to accept a Set<> as a @RequestBody in the following manner:

public @ResponseBody ResponseEntity<Response> addTeamOwner(@RequestParam("teamName") String teamName, @RequestBody Set<String> emails, HttpServletRequest request){...}

On the Angular frontend side, the endpoint is being called like this:

let params = new HttpParams().set('teamName', teamName);
let url = `${UrlManager.TEAMS}/addOwners?${params.toString()}`;
this.httpClient.post<any>(url, emails);

The issue arises where a 400 Bad Request error is returned:

HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: 'Bad Request', url: 'http://localhost:4200/api/teams/addOwners?teamName=DEMO_TEAM', ok: false, ...}

It seems that the backend is not able to accept the Set that Angular is sending. Interestingly, changing it to an Array resolves the issue.

Just for your information, my API is built on SpringBoot and the frontend is developed in Angular.

Answer №1

In reality, serializing data that is transmitted within a Set is not feasible due to the fact that the data is not stored as properties.

To resolve this issue, I opted to convert the set into an array in the following manner:

this.httpClient.post<any>(endpoint, [...emails]);

This way, the backend server can successfully deserialize it back into a Set.

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

Adding elements to an array is not functioning as expected in TypeScript

I have successfully implemented a table using MatTableModule in Angular with Typescript. Everything works perfectly when I assign values to the datasource like this: let dataRow = {name: dealerInfo.name, address: dealerInfo.address, town: dealerInfo.town ...

Stop const expressions from being widened by type annotation

Is there a way to maintain a constant literal expression (with const assertion) while still enforcing type checking against a specific type to prevent missing or excess properties? In simpler terms, how can the type annotation be prevented from overriding ...

What methods are available for ensuring complete REST API coverage through Java unit testing?

After fully embracing the concept of code coverage and achieving 70%+ line coverage, our management team is now shifting their focus to REST API coverage. We are currently exploring the use of RAML to define our JAX-RS REST resources and utilizing code ge ...

Discover how to handle JSON arrays that contain empty or blank fields with Jackson library

Currently, I am utilizing Jackson for parsing a jsonString with the following structure: { "key": "Flowers", "colorized": true, "values": [ [1472428800000, , "#aaaaaa", "", ""], //empty or blank field [1472515200000, , "#bbbbbb", "", ""], ...

The issue of importing images in Angular2 using TypeScript with Express is causing problems for Webpack

Having trouble importing images in my headercomponent.ts file. I believe the issue lies in how I am compiling the TypeScript with webpack ts loader, as it works fine with React (where the components are written in es6). The error occurs at: //headercompo ...

Steps to update the text of the button that is currently selected within an ngFor loop:

Currently, I am using an ngFor loop to display multiple membership options. My goal is to modify the text inside each button from 'select' to 'selected' once a user has made their choice. However, the issue I'm facing is that when ...

Utilizing Java: Complex Program with Advanced 2D Array Index Manipulation

As a beginner in Java and programming, I want to clarify a few things before asking my question. Firstly, I am new to Java and programming in general. Secondly, this is my second post, so please be patient with me if I made any mistakes. Finally, I would a ...

Using TypeScript without specifying a specific argument in the any type

My function accesses local/session storage, but there is a condition that it can only be called if the window is defined. This function takes a generic args argument which I simplified to have a type of any[]. While using the useSessionStorage function, ...

Is there a way to make Typescript accept dot notation?

Is there a way to suppress the compile time error in Typescript when using dot notation to access a property that the compiler doesn't know about? Even though using bracket notation works, dot notation would be much more readable in my specific case. ...

Nested interfaces can utilize sum types

An example showcasing the use of sum types: interface Cash { amount: number, type: 'cash' } interface Card { amount: number, type: 'card', cardNumber: string } type Payment = Cash | Card const displayPayment = (payment: Pay ...

Encountered a problem while running the TestNG suite, an error message displaying 'java.lang.NullPointerException DefaultElementLocator.findElement(DefaultElementLocator.java:69)' was shown

Currently, I'm in the process of developing a hybrid framework using Selenium webdriver and implementing the Page Object Model (POM). In this framework, I have created a parent class named 'TestBase.class'. The Page Object Model consists of ...

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Can anyone assist me with solving a math problem? Let's consider two lists or arrays: Content Array 0-50 = C1 50-100 = C2 AD Array 10-20 = A1 30-60 = A2 80-140 = A3 The desired output should be: 0-10 = C1 10-20 = A1 20-30 = C1 30-60 = A2 60-80 = C ...

Selenium 3.7 WebDriver Issue: Encounter a Timeout While Waiting for Driver Server Initialization

Recently updated to Selenium 3.7 and encountered an error. Error log: Debug 1 Debug 2 Starting ChromeDriver 2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2) on port 2198 Only local connections are allowed. Exception in thread "main" org.o ...

Material-UI chart displays only loading lines upon hovering

Currently, I am utilizing a Material UI Line chart in my NextJS 14 application to showcase some data. Although the data is being displayed properly, I have encountered an issue where the lines on the chart only render when hovered over, rather than appeari ...

Interpolating strings with Angular does not result in binding

My goal is to populate the template using string interpolation. However, when I attempt to reference the variable in the template, I receive the following error: core.js:1350 ERROR TypeError: Cannot read property 'status' of undefined. HTML ...

Tips for retrieving a string instead of an Observable in @angular/http

I'm currently integrating Angular 4 with .NET Core Web API. The Web API is providing a CustomerName as a string based on the Id given. Here is the service method in Angular 4. I know that angular/http needs to return an Observable due to it being an ...

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

The statement "import React from 'react'" is automatically removed by VS Code

When I need to remove unused modules that I no longer need, I frequently use shift + alt + o. This method has worked perfectly for me in the past when editing .tsx files. However, recently, VS Code seems to be removing the import React from 'react&ap ...

Ways to make a GET request with a parameter

I'm currently working on a basic MEAN application, but I'm encountering an issue with a GET method. After adding some data to my mongo collection, I'm trying to retrieve all results by passing the ID as a parameter. However, Angular is givi ...

Describing a property of an interface as the determined form of a conditional type that is generic

I am currently working on defining an interface that includes a method with a conditional function definition. For example: interface Example<T> { func: T extends string ? () => string : () => number; } class ExampleClass<T extends str ...