Click here to Skip to main content
15,797,923 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I will try and be as clear and distinct as possible with my purpose. First of all, I have created a food ordering page where you can order different food dishes.

Let me start by showing some of my frontend code:

const submitOrderHandler = async (event) => {
    let token = await fetch("http://localhost:8080/api/orders", {
        "headers" : {
            'Content-Type': 'application/json'
        "method": "POST",
        "body": JSON.stringify({
            orderedFoodProducts: contextOfBasket.foodProducts
    if (token != null) {
    } else {
        setErrorMessage({name: "invalid..."});

As you can see from my code above, I have created a console.log and it prints it correctly to the console. It looks like it:

amount : 1
id : "food1"
menu : "Menu1"
price : 129
time : "Time: 1 Hour"

[[Prototype]] : Object
length : 1
[[Prototype]] : Array(0)

My problem is that I now have to send data from my frontend (reactJS) to the backend (API). I have tested it and my url works. What I think is the problem is the way the variables are defined in my backend server. Since my contextOfBasket.foodProducts is an array, maybe I should also have an array named orderedFoodProducts with 5 parameters (id, menu, price, time, amount).

Let's look at my from my backend part:

package model;

import jakarta.persistence.*;
import lombok.*;

@Table(name="DBOrder") //!!WATCH out this is a reserved name!
public class Order {
    @Id @GeneratedValue
    private int idValue;

    private int id;
    private String menu;
    private int price;
    private String time;
    private int amount;

    /*@Column @JsonIgnore
    private String hash;*/

I have tried to create an array with the name orderedFoodProducts that contains the 5 informations (id, menu, price, time, amount) that I need, but it gives me an error. I've also tried using different types of annotations. I've tried a few different ways, but they all gives error.
    private int[] orderedFoodProducts = new int[]{ id, Integer.parseInt(menu), price, Integer.parseInt(time), amount };
    private int[] orderedFoodProducts = new int[]{ id, Integer.parseInt(menu), price, Integer.parseInt(time), amount };

The error messages from above is:

'Basic' attribute type should not be 'int[]' 

What did I do wrong on my attempt above?

What I have tried:

I tried and make so my backend ( has an array (orderedFoodProducts) that contains 5 variables (id,menu,price,time,amount). It works on my frontend (ReactJS), when I print it on my console, but not when I try to send it to my backend API, that's because I've defined the my variables wrong, I do need some help and guides.
Updated 21-Nov-22 10:20am
[no name] 22-Nov-22 0:40am    
What's your controller like? What if you annotate the Order argument by @RequestBody ?
[no name] 22-Nov-22 0:48am    
Another solution is accepting the json as plain text in controller, and using a JSON lib(like Jackson, GSON, etc...) just map/unmarshall the json-string into array of Orders. Not sure, but maybe having a class like OrderList that has a List<order> field would do the same thing.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900