Angular 10 | Http post | String array append FormData

Question

I have to make a post request to an api endpoint, but I get an error status 500.

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

This is my code:

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);
});

The issue is in this line: sendData.append('selected[]', selectedIds); I have no clue how to pass an array to FormData.

This is a working example from our android app. I need to convert this request in angular/typescript syntax:

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

What I know so far:

It seems angular does not serialize the data, so I tried some hardcoded fixes, but none of these worked:

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));

If I use selected instead of selected[], then I get no error, but obviously no data is updated, so I am pretty sure it is a serialization/parsing issue.

ForestG · Accepted Answer · 2020-09-15 12:46:47Z

2

From this answer:

FormData's append() method can only accept objects of string or blob type. If you need to append the array, use JSON.stringify() method to convert your array into a valid JSON string.

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

answered Sep 15, 2020 at 12:46

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roman Over a year ago

I see: selected[]: ["31"]

ForestG Over a year ago

can you please check the other form data values as well? This is quite strange. What happens if you only append that single value?

Roman Over a year ago

The issue was indeed somewhere else. Eventhough the var was there, it was the wrong var. Thanks for your help and time.

ng-hobby · Accepted Answer · 2020-09-15 12:59:20Z

The statusCode 500 is the Internal Server Error, and it's the server-side problem. So, It's better to check the API if it can receive your request or not.

FormData's append() method accept string or blob type So you can use JSON.stringify() method (formData.append('selectedIds', JSON.stringify(selectedIds));). So try this:

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);
});

Collectives™ on Stack Overflow

Angular 10 | Http post | String array append FormData

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related