Sending array of objects via POST not working - Angular

Question

I cannot send an array of FormGroup objects to my backend.

Error: It says: "Unsupported Media Type" "Content type 'text/plain;charset=UTF-8' not supported" error 415.

---

Previously, it could not deserialize the array into my Java object in my backend because it was not in JSON format, and now I am stuck with this.

I have tried to use JSON.stringify(arrayOfFormGroups) to convert it to JSON, but I do not know why it says I am sending plain/text.

---

This code gives you the content type error.

TS

// Inserts all the form data into one array let dataArray: String[] = [this.form1.value, this.form2.value, this.form3.value, this.form4.value]; // Send the form data to the service, which then sends the data to the server (Spring-Boot) this.data.sendFormData(JSON.stringify(dataArray)).subscribe( response => console.log("Success! ", response), error => console.error("Error: ", error) ); } 

This code makes the array undeserializable for consumption in the backend.

TS

// Inserts all the form data into one array let dataArray: String[] = [this.form1.value, this.form2.value, this.form3.value, this.form4.value]; // Send the form data to the service, which then sends the data to the server (Spring-Boot) this.data.sendFormData(dataArray).subscribe( response => console.log("Success! ", response), error => console.error("Error: ", error) ); } 

Service

sendFormData(userData) { return this.http.post<any>("http://localhost:8080/create", userData); } 

---

Expected

I want to POST my array of FormGroups to my backend as JSON String.

Actual

An error occurs when I POST, unsupported content-type plain/text even though I am sending JSON.

Answer 1

The solution is to store the data into an object, not an array. The reason is that you cannot send a JSON array to your backend if it only consumes one single object. They are incompatible.

TS

 // User object private user = { firstName: String, lastName: String }; .... // Populates the user object this.user.firstName = this.form1.controls['firstName'].value; this.user.lastName = this.form2.controls['lastName'].value; // Sends the form data to the service this.data.sendFormData(JSON.stringify(this.user)).subscribe( response => console.log("Success! ", response), error => console.error("Error: ", error) ); 

I am using multiple form groups because I am using Angular material's stepper in linear mode, which requires each step to have its own FormGroup.

More on that: https://material.angular.io/components/stepper/overview#linear-stepper

Also, I had to add a header to my POST:

My Service

private header = new HttpHeaders({ 'content-type': 'application/json' }); constructor(private http: HttpClient) { } ngOnInit() { } sendFormData(userData) { return this.http.post("http://localhost:8080/createAccount", userData, { headers: this.header }); } 

Good reading on converting objects to JSON VS arrays to JSON:https://alligator.io/js/json-parse-stringify/