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/