I'm trying to add an array of objects in JavaScript and send it in JSON to my Java rest controller and store in my database, but it doesn't store. It works when I store another models in my "lote" model. Follow the code snippets:
My "Lote" model:
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
private LocalDateTime dataEntrega;
private String observacao;
@ManyToMany(mappedBy="lotes", fetch=FetchType.EAGER)
private List<Produto> produtos = new ArrayList<>();
@ManyToOne
private OrgaoDonatario orgaoDonatario;
@ManyToOne
private OrgaoFiscalizador orgaoFiscalizador;
My "Produto" model:
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
private String nome;
private String descricao;
@ManyToMany(fetch=FetchType.EAGER)
@JoinTable(name="produto_lotes")
private List<Lote> lotes;
"Lote" controller
@PostMapping(value="/cadastrarLote")
public String cadastroDeLote(Model m, @RequestBody Lote lote) {
lote.setDataEntrega(LocalDateTime.now());
loteRepo.save(lote);
return "OK!";
}
"Lote" form:
<body>
<form onsubmit="cadastroLote()">
<legend>
<center>
<h3>Cadastrar Um Lote</h3>
</center>
</legend>
<div class="form-group">
<label for="exampleInputEmail1">Insira uma observação: </label>
<input type="text" class="observacao" id="Iobservacao">
</div>
<div class="form-group form-check" id="form-check-div">
<label for="">Selecione os Produtos Contrabandeados para o Lote: </label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Orgão Donatário Destinatário: </label>
<select class="orgaoDonatario" id="IorgaoDonatario">
<option aria-placeholder="Selecione uma opção"></option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Orgão Fiscalizador que Apreendeu: </label>
<select class="orgaoFiscalizador" id="IorgaoFiscalizador">
<option aria-placeholder="Selecione uma opção"></option>
</select>
</div>
<center><button type="submit" class="btn btn-primary">Cadastrar</button></center>
<center><a href="listaDeOrgaosDonatarios.html" class="btn btn-danger">Retornar</a></center>
</form>
<script>
let tipoSel = document.getElementById("IorgaoDonatario")
const xhr2 = new XMLHttpRequest()
const url2 = "http://localhost:8080/orgaoDonatario/Lista"
xhr2.open("GET", url2, false)
xhr2.onreadystatechange = function () {
let orgaosDonatarios = JSON.parse(xhr2.responseText)
for (let i = 0; i < orgaosDonatarios.length; i++) {
let tdOption = document.createElement("option")
tdOption.setAttribute("value", orgaosDonatarios[i].id)
tdOption.appendChild(document.createTextNode(orgaosDonatarios[i].nome))
tipoSel.appendChild(tdOption)
}
}
xhr2.send()
</script>
<script>
let tipoSel2 = document.getElementById("IorgaoFiscalizador")
const xhr3 = new XMLHttpRequest()
const url3 = "http://localhost:8080/orgaoFiscalizador/Lista"
xhr3.open("GET", url3, false)
xhr3.onreadystatechange = function () {
let orgaosFiscalizadores = JSON.parse(xhr3.responseText)
for (let b = 0; b < orgaosFiscalizadores.length; b++) {
let tdOption2 = document.createElement("option")
tdOption2.setAttribute("value", orgaosFiscalizadores[b].id)
tdOption2.appendChild(document.createTextNode(orgaosFiscalizadores[b].nome))
tipoSel2.appendChild(tdOption2)
}
}
xhr3.send()
</script>
<script>
let checkBoxDiv = document.getElementById("form-check-div")
let checkBoxLabel = document.getElementById("form-check-label")
const xhr4 = new XMLHttpRequest()
const url4 = "http://localhost:8080/produto/Lista"
xhr4.open("GET", url4, false)
xhr4.onreadystatechange = function () {
let produtos = JSON.parse(xhr4.responseText)
for (let c = 0; c < produtos.length; c++) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = produtos[c].id
checkbox.name = "valoresProdutos";
var label = document.createElement('label');
label.appendChild(document.createTextNode(produtos[c].nome))
checkBoxDiv.appendChild(label)
checkBoxDiv.appendChild(checkbox)
}
}
xhr4.send()
</script>
</body>
Then I use this js code to parse the data from the form to JSON and send the JSON to the rest controller:
function cadastroLote(){
event.preventDefault()
let url = "http://localhost:8080/cadastrarLote"
let Iobservacao = document.getElementById("Iobservacao").value
let select = document.getElementById("IorgaoDonatario")
var Idonatario = select.options[select.selectedIndex].value
let select2 = document.getElementById("IorgaoFiscalizador")
var Ifiscalizador = select2.options[select2.selectedIndex].value
let donatario = new Object()
donatario.id = Idonatario
let fiscalizador = new Object()
fiscalizador.id = Ifiscalizador
let request2 = new XMLHttpRequest()
let url5 = "http://localhost:8080/produto/Lista"
request2.open("GET", url5, false)
request2.send()
let produtos2 = JSON.parse(request2.responseText)
var arrayDeProdutos = [];
var checkboxes = document.getElementsByName('valoresProdutos')
for (var i = 0; i < checkboxes.length; i++) {
for(var b = 0; b < produtos2.length; b++){
if (checkboxes[i].checked && checkboxes[i].value == produtos2[b].id) {
let produto = new Object()
produto.id = checkboxes[i].value
arrayDeProdutos.push(produto)
}
}
}
console.log(arrayDeProdutos)
body={
"observacao": Iobservacao,
"orgaoDonatario": donatario,
"orgaoFiscalizador": fiscalizador,
"produtos": arrayDeProdutos
}
fazPost(url,body)
}
function fazPost(url, body){
console.log("Body=", body)
let request = new XMLHttpRequest()
request.open("POST", url, true)
request.setRequestHeader("Content-type", "application/json")
request.send(JSON.stringify(body))
request.onload = function() {
console.log(this.responseText)
}
return request.responseText
}
When I save the "lote", it works to save "observacao", "orgaoDonatario" and "orgaoFiscalizador", but the array of "produtos" displays a blank space. How can I solve this problem?