POST method: sending an array to backend API URL

See more:

Java

API

annotation

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) => {
    console.log(contextOfBasket.foodProducts);
    //event.preventDefault();
    //console.log(data);
    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) {
        setIsSending(false);
        setDidSend(true);
    } else {
        setErrorMessage({name: "invalid..."});
        renderErrorMessage()
    }
};

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:

[{…}]
0: 
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 Order.java from my backend part:

package model;

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

@Entity
@Table(name="DBOrder") //!!WATCH out this is a reserved name!
@Getter
@Setter
@Builder
@ToString
@RequiredArgsConstructor
@AllArgsConstructor
public class Order {
    @Id @GeneratedValue
    @Column
    private int idValue;


    @Column
    private int id;
    @Column
    private String menu;
    @Column
    private int price;
    @Column
    private String time;
    @Column
    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.

 @Column
    private int[] orderedFoodProducts = new int[]{ id, Integer.parseInt(menu), price, Integer.parseInt(time), amount };
-----
 @ElementCollection
    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 (Order.java) 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.