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);
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")
@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;
}
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.