Sending array through POST from React App to Spring Boot

Question

I've already seen similar question with no success. I need to send a matrix of numbers from a web app (ReactJS) to a Spring Boot controller.

I've tried many combination but it always get error, my payload is:

{"rows":[[7,0,0,6,4,0,0,0,0],[9,4,0,0,0,0,8,0,0],[0,8,6,2,5,0,0,9,0],[0,0,0,0,6,8,7,3,0],[4,0,8,0,2,1,0,0,0],[0,0,3,0,0,0,1,6,4],[0,0,0,0,0,9,6,7,5],[3,9,0,0,8,5,0,1,2],[0,0,5,0,0,4,0,0,0]]}

My react code is:

axios.post('http://localhost:8090/api/check', {
        rows: this.props.rows
    })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });

And my Spring Boot controller is:

@PostMapping(path = "/check")
@CrossOrigin(origins = "http://localhost:3000")
public boolean check(@RequestParam(value = "rows") final int[] array, final int row, final int col, final int num) {
    return true;
}

I've already tried to declare @RequestParam(value = "rows[]") or @RequestParam(value = "rows"). Rather than @RequestParam(value = "rows") final Object rows.

But it always respond with error 400 (Bad request).

How can I pass a matrix through POST request?

Thanks

Why are you passing a huge payload in RequestParam? You should pass it in RequestBody of POST request instead. — Jignesh M. Khatri
– Jignesh M. Khatri, Commented Oct 25, 2018 at 13:50
@JigneshM.Khatri thanks for the reply, what do you mean? Are you talking about the axios.post() call? How can I pass it in the RequestBody? — Alessandro
– Alessandro, Commented Oct 25, 2018 at 13:54
Sorry but I am not aware about react but very much aware about Spring. Currently what you are doing is passing array in request parameter (query string) which is not recommended. — Jignesh M. Khatri
– Jignesh M. Khatri, Commented Oct 25, 2018 at 13:59

Alessandro · Accepted Answer · 2018-10-26 09:28:39Z

Finally, I solved wrapping all the parameter in just one Object.

@JsonAutoDetect
public class Params {

    private int[][] matrix;
    private int row;
    private int col;
    private int num;

    [...getters and setters]

And then declaring just one param in the sign of the method in the controller:

    @PostMapping(path = "/check")
    @CrossOrigin(origins = "http://localhost:3000")
    public boolean check(@RequestBody final Params params) {
        return sudokuGenerator.checkValue(params.getMatrix(), params.getRow(), params.getCol(), params.getNum());
    }

Crucial, the client should pass the object with its atrtibutes, without any kind of wrapper, so in this way:

axios.post('http://localhost:8090/api/check', {
     matrix: this.props.rows,
     "row": row - 1,
     "col": col - 1,
     "num": input.textContent
})

And not, in this way (with a root attribute "params"):

axios.post('http://localhost:8090/api/check', {
     "params" : {
         matrix: this.props.rows,
         "row": row - 1,
         "col": col - 1,
         "num": input.textContent
     }
})

Sunchezz · Accepted Answer · 2018-10-25 14:14:15Z

0

I would suggest to turn your variable "rows" into a int[][] array, cause thats it what your json represents.

Also, in my spring webapplication i don't neccesarly need to declare a request parameter by annotation. Try to remove the Annotation (Spring will detect the parameter itself). Also, remove all method parameter which are not included in the json (the request data).

@PostMapping(path = "/check")
@CrossOrigin(origins = "http://localhost:3000")
public boolean check(int[][] array) {
    return true;
}

If you want to work with annotations, use @RequestBody for POST calls, @RequestParameter reads GET-Parameter (from URL like .../bla?param1rows=[[0,0]])

edited Oct 25, 2018 at 14:14

answered Oct 25, 2018 at 14:06

Sunchezz

7888 silver badges24 bronze badges

1 Comment

Alessandro Over a year ago

Thanks, with @RequestBody I get Cannot deserialize instance of int[][] it's a big step forward.

Collectives™ on Stack Overflow

Sending array through POST from React App to Spring Boot

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related