Guide on sending an array of properties to the backend in Angular using Spring Boot

I have a method that I am using to send a list of values to my backend. The required JSON format is:

{
value: [xyz]
}

Currently, I am only sending the "xyz" part to the backend as a single value, but I need to send it in the specified format.

When I check the payload sent to the backend in the network console, it shows something like this: "xyz".

This is the function I am currently using to send these values:

 setValueForTest() {
    this.personArray = this.form.controls.selectBox.value;
    this.personArraySave = []
    this.personArray.forEach((id) => {
        this.personArraySave.push(id)
        this.api.setValueForPerson({
          body: id
        
        ).subscribe(response => {
          console.log(response)
        });
      }
    });
  } 

The attributes "body" and "personArraySave" are of type Person, which has an attribute of "id: Array."

Answer №1

In my mind, the function api.setValueForPerson is responsible for transmitting data. If this assumption holds true, you could potentially transmit the data in the following manner:

setValueForPerson(person: Person): Observable<any> {
   return this.httpClient.post<any>(yourURL, { value: person });
}

Answer №2

We are grateful to all those who offered assistance, the issue has been resolved by instantiating an Element of the Object being sent. This enabled me to manipulate the array element within that model and insert my values accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Controlling a first person shooter game using three.js

I'm a beginner in three.js and 3D design, aiming to create a simple first-person shooter game. While I've come across several examples, they seem too complex for me to grasp. I prefer to understand the code thoroughly before implementing it. My m ...

Dealing with a void method in a React unit test by treating it as an object's property

How can I pass a value to a function in an interface to trigger a click event on an element? I have a React component that I want to write unit tests for: const VariantItem = (props: VariantItem): ReactElement => { return ( <div key={props.produc ...

Toggle the visibility of a material progress bar on the app component using child components

I'm currently learning Angular and have a small question about it. In my App component, I have a Material Progress bar like this: <mat-progress-bar mode="indeterminate" *ngIf="IsLoading"></mat-progress-bar> <router- ...

How to send props from a Vue.js component tag in an HTML file

I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component. Here's a snippet of my index.html file: <div id="js-group-discounts"> <div class="form-group required"> <datepick ...

Embracing the jQuery input mask plugin within a Dart Web UI element

I'm facing an issue with integrating an input mask jQuery plugin into a Dart web component. The plugin works perfectly fine when applied to an element outside of a web component, but it fails to function properly within a web component. Interestingly, ...

Implementing an event listener on a mesh operation

I tried implementing a function in Three.js to create a sphere and wanted to add an event listener to log the value of textureToShow when it's clicked. However, when I tested it, nothing showed up in the console. Below is the code I used: function cre ...

Assistance needed with sending JSON data to a PHP server using the POST method

I am attempting to transfer JSON data from an HTML form to a PHP server using the POST method. The issue I am encountering is that my code always ends up in the fail block within the callback function. Despite this, the Firebug console (ctrl+shift+J) does ...

What is the best way to assign a URL to an image source using a JavaScript variable?

I am working on a script that displays different image URLs based on the time of day using an if-else statement. I want to dynamically load these images in an img src tag so that a different picture is loaded for each time of day. I have defined variables ...

Navigating in Angular 2 with JavaScript: A Complete Guide

Currently, I am progressing through the Tour of Heroes tutorial, specifically navigating the Routing section. My implementation is based on the 2.0.0-RC4 bundle. The refactoring of the AppComponent into a shell for the HeroesComponent has been successfull ...

Is there a way to verify duplicate email addresses without the need to click any button?

As I work on developing a web application, I am faced with the challenge of checking for duplicate email addresses in real-time without the need to press a button. This check must be done by comparing the data with information stored in the database. Since ...

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

The JQuery File-Upload plugin remains inactive even after a file has been chosen

I am currently working on integrating the JQuery File-Upload plugin (). The issue I'm facing is that it doesn't respond when a file is selected. Here are some potential problems to consider: No errors appear in the Chrome console. Selecting a ...

Implementing object rotation towards a target using three.js

Even though I have been working with vector graphics for over 13 years now, I still find it challenging to grasp how three.js handles things. One thing I am trying to achieve is having an object that always faces the camera and rotates accordingly. In ano ...

The error message "core.js:10101 NG0303: Unable to link to 'matCellDefOf' because it is not a recognized property of 'td'" was displayed on the console

While utilizing Mat table from Angular Material, an error appears in the console as shown in this image: core.js:10101 NG0303: Can't bind to 'matCellDefOf' since it isn't a known property of 'td'. View image description here ...

The Street View feature on Google Maps API is now showcasing a cool,

I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...

Is there a way to send push notifications to a designated user on an iOS device using Firebase, without relying on APN?

In my Angular project for a kindergarten portal, teachers post updates on what students are doing throughout the day. When a new article is published for a specific child, I want to send a push notification to their parent's iOS device. A former empl ...

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

Utilizing a class member's data type

I need to inform Typescript that a member of my class is derived from another class. For instance: Class Main{ getDataFromChild(data){ console.log(data) } } Class Child{ getDataFromChild: Main.getDataFromChild } Scenario Application In my s ...

A guide for finding a specific string within a subset of an array

I have an array containing various substrings, and I want to pass if at least one of those substrings contains the specific value I am searching for. Value1 = [ "Grape | 100 |Food Catering Service", "Apple | 100,000m |Food Catering Servi ...

Sending chosen selection in a scrollable dropdown menu in Angular

Here is the HTML code that I'm working with: <div class="container"> <div> <h1 class="table-title">Employees</h1> <table class="table"> <thead class="thead-dark"& ...