javascript - Angular 10 | Http post | Agregar arreglo de cadenas a FormData

Tengo que hacer una solicitud POST a un endpoint de API, pero obtengo un error de estado 500.

name: "HttpErrorResponse"
ok: false
status: 500
statusText: "Internal Server Error"

Este es mi código:

var selectedIds = ["31"];
let sendData = new FormData();
sendData.append('auth', this.dataService.REG_AUTH);
sendData.append('identifier', identifier);
sendData.append('selected[]', selectedIds); 

this.http.post<any>('APIENDPOINT', sendData).subscribe(data => {
  console.log(data);
}, error => {  
  console.log(error);
});

El problema está en esta línea: sendData.append('selected[]', selectedIds); No tengo ni idea de cómo pasar un array a FormData.

Este es un ejemplo funcional de nuestra aplicación para Android. Necesito convertir esta solicitud a la sintaxis de Angular/TypeScript:

@JvmSuppressWildcards
@FormUrlEncoded
@POST("APIENDPOINT")
fun addData(
    @Field("auth") auth: String,
    @Field("identifier") identifier: String,
    @Field("selected[]") selected: ArrayList<String>
): Call<ResponseBody>

Lo que sé hasta ahora:

Parece que Angular no serializa los datos, así que intenté algunas soluciones codificadas, pero ninguna de ellas funcionó:

sendData.append('selected%5B%5D', '%2231%22'); 
sendData.append('selected%5B%5D', '31');
sendData.append('selected%5B%5D', 31);
sendData.append('selected%5B%5D', '%5B%2231%22%5D'); 
sendData.append('selected%5B%5D', selectedIds); 
sendData.append('selected%5B%5D', JSON.stringify(selectedIds));

Si uso selected en lugar de selected[], entonces no obtengo ningún error, pero obviamente no se actualizan los datos, así que estoy bastante seguro de que es un problema de serialización/parseo.

Respuesta #1

De esta respuesta:

El método append() de FormData solo puede aceptar objetos de tipo cadena o blob. Si necesitas agregar el array, utiliza el método JSON.stringify() para convertir tu array en una cadena JSON válida.

formData.append('selected[]', JSON.stringify(selectedIds));

Respuesta #2

El statusCode 500 es el Error Interno del Servidor, y es un problema del lado del servidor. Por lo tanto, es mejor verificar el API si puede recibir tu solicitud o no.

El método append() de FormData acepta tipos string o blob, por lo que puedes usar el método JSON.stringify() (formData.append('selectedIds', JSON.stringify(selectedIds));). Entonces, prueba esto:

let selectedIds = ["31"];
let sendData = new FormData();
sendData.append('auth', this.dataService.REG_AUTH);
sendData.append('identifier', identifier);
sendData.append('selectedIds', JSON.stringify(selectedIds)); 

this.http.post<any>('APIENDPOINT', sendData).subscribe(data => {
  console.log(data);
}, error => {  
  console.log(error);
});