Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Question

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Whenever I try to send a post request to an api endpoint, I keep encountering an error with status code 500.

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

Below is the code I am using:

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 problem seems to be occurring at this line:

sendData.append('selected[]', selectedIds);

. I'm unsure about how to pass an array to FormData correctly.

I have a functional example from our android app that I need to convert into Angular/Typescript syntax:

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

After trying some hardcoded fixes without success, I suspect it might be an issue with serialization or data parsing in Angular:

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

Using selected instead of selected[] does not yield any errors, but no data is updated either. This leads me to believe it's related to serialization or parsing issues.

javascript angular typescript http post

Answer 1

Answer №1

According to the information provided in this specific answer:

The append() method of FormData is limited to accepting string or blob objects only. If you wish to include an array, you can utilize the JSON.stringify() function to convert your array into a valid JSON string.

formData.append('selectedItems[]', JSON.stringify(selectedIDs));

Answer 2

According to the information provided in this specific answer:

The append() method of FormData is limited to accepting string or blob objects only. If you wish to include an array, you can utilize the JSON.stringify() function to convert your array into a valid JSON string.

formData.append('selectedItems[]', JSON.stringify(selectedIDs));

Answer 3

Answer №2

When you encounter a statusCode 500, it means there is an Internal Server Error, usually indicating a server-side issue. In this case, it's important to verify if the API can properly handle and process your request.

The append() method in FormData accepts either a string or a blob. To pass an array as data, you can use the JSON.stringify() method like this:

formData.append('selectedIds', JSON.stringify(selectedIds));

. Give this a try:

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

Answer 4

When you encounter a statusCode 500, it means there is an Internal Server Error, usually indicating a server-side issue. In this case, it's important to verify if the API can properly handle and process your request.

The append() method in FormData accepts either a string or a blob. To pass an array as data, you can use the JSON.stringify() method like this:

formData.append('selectedIds', JSON.stringify(selectedIds));

. Give this a try:

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

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Answer №1

Answer №2

Similar questions

Converting a Finsweet hack #4 from jQuery to pure JavaScript in Webflow: Step-by-step guide

Extracting over 100 tweets from the Twitter API with the help of Node.js

Have you ever encountered issues with Promises.all not functioning properly within your vuex store?

Safari Glitch in Bootstrap 4

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

When the table is clicked, a dynamic accordion table should appear

Using Model.create does not result in the creation of a document immediately; instead, it is resolved as

The functionality of the jQuery script is not operating optimally, causing the expected alert to not be displayed

Using Formik with MUI Multiple Select

Transferring an array of interfaces between Angular 2 components

How to implement an Angular Animation that is customizable with an @Input() parameter?

Is your Cloud Functions task generating an Array when querying?

Concealed checkbox value in jQuery

Retrieving a value using forEach in protractor - Dealing with closures

Ways to retrieve sorted and updated items in ngx-datatable post-sorting

add information to a JavaScript "JSON array"

Utilize JavaScript to extract an image from an external URL by specifying its attributes (id, class)

Innovative techniques for class manipulation

The contents of Ionic views are not stored in a cache, so the controller must

Creating a personalized ESLint rule specifically for Redux reducers