Advanced AJAX call to Spring's POST endpoint

I am struggling with passing a complex data structure to a post method. Specifically, I am trying to pass a

Map<String, List<String>>
and I am unsure of how to format this in my JavaScript method. Can anyone advise on how to create this structure in JavaScript and then successfully pass it in the post method?

Answer №1

In accordance with advice from @ADyson, it seems that the JSON data structure you require would resemble the following:

{ "x": ["7", "8", "9"], "y": ["10", "11", "12"] }

To initiate ajax requests, one can utilize the fetch function. However, if one prefers to explore other options apart from fetch, there are numerous alternatives available, although they will not be outlined here.

fetch('http://www.yourendpoint.com/some-other-route', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({x: ["7", "8", "9"], y: ["10", "11", "12"] }),
})

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

What is an alternative method for inserting data into a MySQL database without using cron jobs?

I am currently facing a challenge with my web-based game development project. It is essentially a real-time web application where players can construct various buildings, each identified by a unique hash ID. The details of these buildings, including all pa ...

Guide on iterating through an array of objects a specified number of times to ensure it loops through all child arrays within the objects, if they exist

How can I iterate through an array of objects a certain number of times to access all the child arrays within each object and retrieve their IDs in order? let data = [{ "id": "1", "child": [ { "id": "12", "child": [ { ...

Error in projecting D3 world-50m.json file causing fill issues

I am currently working with the world-50m.json file for a projection, but I'm facing an issue where several countries are being cut off at the edges when filled with color. This results in horizontal fill sections/lines across the map. This problem i ...

What is the most effective method for analyzing data that has various dimensions?

Here's the simple situation: I'm currently developing an internal calculator for my team to determine the pricing of the t-shirts we offer. https://i.sstatic.net/k9J2n.png We have a similar pricing grid as shown in the image provided. The form ...

Attempting the transformation of jQuery ajax requests to Angular's http service

I am looking to transition my existing mobile application from using jquery ajax to angularjs for handling user authentication with server-side validation. Here is the original jquery ajax code: function validateStaffUser(username, password) { var re ...

Tips for streamlining ng-switch with comparable elements?

Here is the code snippet I'm working with: <span ng-switch="status"> <span ng-switch-when="NOT OK"> <span style="color: red;" ng-bind="status"></span> </span> <span ng-switch-when="OK"> ...

How do I incorporate a smooth transition effect for opacity in this slideshow code? Part Two

Sorry to bring this up again, but I have made some progress since yesterday. However, I am still unable to complete it, and I'm starting to feel a bit desperate. If you recall, the question I posted yesterday can be viewed here: How can I add opacity ...

When the user initiates a fetch request, they will be directed to the POST page as a standard

Whenever I utilize fetch for a post request, I encounter an issue where the user is not redirected to the Post page as they would be with a regular form submission. My goal is to be able to direct the user to a specific location on the server side at app ...

uploading files and data using formData in jquery without the need for a form in asp.net

(...) UPDATE: // Front end var $elem = $("a.attachMessageBtn"); var evtOnClick = $elem.attr('onclick'); var postData = new FormData(); postData.append("FID", FID); postData.append("messageText", messageToSend); for (var i = 0; i < files.le ...

Vue.js caution about "Unnecessary non-emits event listeners" alert for events within RouterView

Is there a way for me to trigger events from my child components and have them reach the top-level App.vue component even though I am using a RouterView to render the child components in the App.vue template? <template> <Navbar /> <c ...

Importance of xpath:position and xpath:attribute

I'm currently developing a recording tool using JavaScript that is comparable to Selenium. When it comes to Playback, I require the XPath position and its attributes (shown in the screenshot below from Selenium). Can anyone provide guidance on how to ...

What steps should I take to see my JavaScript code in a web browser?

As a beginner in JS, I'm curious about how to display the results of my code. When I try to use this small snippet of test code, the browser shows a blank page: if ( 11 > 10 ) { console.log("You made it!") } else { console.log("You have ...

I am interested in redirecting command line output to a file rather than displaying it in the standard

Is it possible to use child-process and spawn in node.js to execute a command and save the output to a file instead of displaying it on the standard output? test.js const expect = require('chai').expect; const { spawn } = require('child_pr ...

The submission of a form within a conditionally displayed component is not being executed

Within my custom tagfile, I have implemented a form: <h:form> <h:commandButton value="click"> <f:ajax event="click" listener="#{bean[method]}" /> </h:commandButton> </h:form> I am dynamically rendering it usi ...

Utilizing Electron API within an Angular Component

I'm hoping to utilize a locally stored video file in electron and play it within my angular component. Despite exposing the loadLocalFile function to prevent the need for setting nodeIntegration to true, I keep receiving a Security Warning : This re ...

Secure AJAX login redirecting to user-defined URL (protection)

Currently, I am developing an AJAX login form that sends login information to the back-end upon submission. If there is an issue with the login credentials, the appropriate response is generated. However, if the login details are correct, the back-end crea ...

Unique Version: When utilizing custom window.FileReader methods, Angular zone execution is bypass

Upon transitioning an Ionic/Angular project from Cordova to Capacitor, I found it necessary to override the default window.FileReader in order to successfully execute the onload() method. Here is the approach I took (https://github.com/ionic-team/capacitor ...

Is there a way to effortlessly launch a new window with just a single click?

I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...

What is the best way to save the values of a particular attribute from several documents?

I have a challenge where I need to extract the ObjectID values from multiple documents stored in a single collection and store them in a single array. I'm currently stuck on how to achieve this task. Below is what I've tried so far: app.get("/se ...

Can strings from AppleScript be converted into arrays in TypeScript?

I'm working on executing AppleScript in TypeScript, which returns a string that actually contains an array. Is there a way to convert this string into an array of items in TypeScript? Below is the code snippet for obtaining a string of an array from ...