Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

Question

Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

After struggling with this issue repeatedly while developing my web apps, I've reached a breaking point and need some help. My frustration might come across as venting, but I'm genuinely stuck.

The challenge I'm facing is sending key-value pairs from my client (vanilla JS) to my backend (Spring Boot Java). Despite trying various approaches, I can't seem to find the right method or combination to achieve my goal. Below is the snippet of my current code that's not working:

Client-Side JS

var object = {
        'id' : 1,
        'username' : 'jumpthruhoops',
        'password' : 'melodysteez'
    };

    Axios
        .post('http://localhost:8080/gameSchedule', JSON.stringify(object))
        .then((response) => {
            console.log(response.data);
        });

Back-End Spring Boot/Java

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(@RequestBody String user) {
    System.out.println(user);
    return "test";
}

The output I'm getting is somewhat close to what I expect. It shows a line like...

%7B%22id%22%3A1%2C%22username%22%3A%22tdellard1%22%2C%22password%22%3A%22sisters3%22%7D=

...which seems to be a hex code for the string object I passed in. I'm not sure if this is an issue with Spring Boot or caused by using JSON.stringify. Since the actual objects I plan on passing are more complex, I'd prefer not to deal with decoding the hex code unless there's no other solution.

Given the complexity, I don't want to use @RequestParams("name") String VariableName numerous times in the method parameter. Another method I tried involves @ModelAttribute and (@RequestBody User user), both resulting in errors. The most common error I encounter is:

018-10-30 23:38:29.346 WARN 12688 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

With all these challenges, I need guidance on the best way to send data from Axios (form.serialize, JSON.stringify, JavaScript Object, etc.) and the corresponding method to process this data effectively on my Spring Boot Back-End, so I can work with it as a POJO.

javascript java json spring-boot axios

Answer 1

Answer №1

When sending an object, it is important to use the object when receiving on the back-end side. Ensure that the name of the field in the request object matches the field name in the class on the back-end side, like so:

To access the fields and make changes in your code:

var data = {  
        'id' : 1,
        'username' : 'jumpthruhoops',
        'password' : 'melodysteez'
    };
// Variable name (data variable) can be anything but treat everything inside as the body

axios.post('http://localhost:8080/gameSchedule', JSON.stringify(object), {
        headers: {
            'Content-Type': 'application/json',
        }
    }
    );

Retrieve fields on the back-end side:

// Create a Student class to map fields with the body 

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(@RequestBody Student student) {
    System.out.println(student.id);
    System.out.println(student.username);
    System.out.println(student.password);
    return "test"
}

Answer 2

When sending an object, it is important to use the object when receiving on the back-end side. Ensure that the name of the field in the request object matches the field name in the class on the back-end side, like so:

To access the fields and make changes in your code:

var data = {  
        'id' : 1,
        'username' : 'jumpthruhoops',
        'password' : 'melodysteez'
    };
// Variable name (data variable) can be anything but treat everything inside as the body

axios.post('http://localhost:8080/gameSchedule', JSON.stringify(object), {
        headers: {
            'Content-Type': 'application/json',
        }
    }
    );

Retrieve fields on the back-end side:

// Create a Student class to map fields with the body 

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(@RequestBody Student student) {
    System.out.println(student.id);
    System.out.println(student.username);
    System.out.println(student.password);
    return "test"
}

Answer 3

Answer №2

To switch from using JSON.stringify(object) to simply passing the object, you can modify your Axios post request like this:

Axios
    .post('http://localhost:8080/gameSchedule', object)
    .then((response) => {
        console.log(response.data);
    });

For a detailed example of a POST request, check out the axios documentation here

In Spring Boot, you'll need to create an entity similar to the one below:

@Entity
public class UserAccount implements Serializable {

@Id
private Long id;

@Column(unique = true, nullable = false)
@Size(max = 255)
private String userName;

@Column(nullable = false)
@NotNull
private String password;

public Long getId() {
    return id;
}

public void setId(Long id) {
    this.id = id;
}

public String getUserName() {
    return userName;
}

public void setUserName(String userName) {
    this.userName = userName;
}

public String getPassword() {
    return password;
}

public void setPassword(String password) {
    this.password = password;
}

}

Then update your code with this snippet:

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public UserAccount getSchedule(@RequestBody UserAccount user) {
    System.out.println(user.getUserName());
    return user;
}

Answer 4

To switch from using JSON.stringify(object) to simply passing the object, you can modify your Axios post request like this:

Axios
    .post('http://localhost:8080/gameSchedule', object)
    .then((response) => {
        console.log(response.data);
    });

For a detailed example of a POST request, check out the axios documentation here

In Spring Boot, you'll need to create an entity similar to the one below:

@Entity
public class UserAccount implements Serializable {

@Id
private Long id;

@Column(unique = true, nullable = false)
@Size(max = 255)
private String userName;

@Column(nullable = false)
@NotNull
private String password;

public Long getId() {
    return id;
}

public void setId(Long id) {
    this.id = id;
}

public String getUserName() {
    return userName;
}

public void setUserName(String userName) {
    this.userName = userName;
}

public String getPassword() {
    return password;
}

public void setPassword(String password) {
    this.password = password;
}

}

Then update your code with this snippet:

@CrossOrigin
@RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public UserAccount getSchedule(@RequestBody UserAccount user) {
    System.out.println(user.getUserName());
    return user;
}

Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

Answer №1

Answer №2

Similar questions

Error message in React JSX file: "Encountered an issue with 'createElement' property being undefined"

Restrict the duration of time a user can spend in the v-calendar

What is the best way to retrieve the "data" from an Instagram API response?

Guide for creating a function that accepts an array containing multiple arrays as input

Utilizing Squelize's junction table for forming new connections: a comprehensive guide

Update Material-ui to include an inclusive Datepicker widget

I'm struggling to update a value in my view with Angularjs and Socket.io. It seems impossible to

Unable to convert JSON data for integration with rxjs

Pick and modify a particular component in ReactJS

The data shown in the C3.js tooltips

Implement the use of NextAuth to save the session during registration by utilizing the email and password

Angular JS is up and running

The issue arises when the logout component fails to render even after the user has been authenticated. This problem resembles the one discussed in the React Router

Issue: Unable to access 'filter' property of null object

Error in JavaFX: CSS Parser anticipating COLON

My stored variable in the php session is not being recalled properly

Experiencing issues with creating HTML using JavaScript?

Tips for storing Appium capabilities in a JSON file and accessing them in your code

What are the steps to ensure my MERN application refreshes properly when deployed on Heroku?

Converting the jQuery $.xajax loadmore feature into a custom XMLHttpRequest JavaScript function