Strange error in front-end of full-stack Spring Boot academic project

Question

We've been asked, for an academic project, to develop a full-stack web system using Java, Maven and Spring-Boot, trying to follow the CLEAN architecture and the SOLID principles. The teacher told me that the most important goal was to make back-end and front-end communicate. The system I developed is thin, composed of a few back-end Java classes and MySQL db, and a simplified front-end, with 2 HTML files and succinct CSS and JavaScript code.
The front-end page includes two JS async functions; the first retrieves a recipe name via its id attribute, and the other tries to retrieve a complete list of recipes stored in its respective MySQL db table, via the following JPA @Query annotation:

@Query (value = "SELECT matricula, registro, nome FROM RECEITA", nativeQuery = true)

Expected returned values are:

But actually displayed results were:

I would consider my level of expertise in programming as beginner; I don't know where the mistake is, there are so many methods and files involved. I will paste the code so that maybe someone may point out the probable error.
Project folder structure:

App.java:

package com.pucrs.grupo2.Recipes;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

@SpringBootApplication
@ComponentScan(basePackages = "com.pucrs.grupo2")
@EnableJpaRepositories(basePackages = {"com.pucrs.grupo2"}) // onde procurar as interfaces dos repositórios do JPA
@EntityScan(basePackages = {"com.pucrs.grupo2"}) // onde procurar as entidades
public class App {
    public static void main(String[] args) {
        
        SpringApplication.run(App.class, args);
        
    }
    
}

ClienteFachadaRemota.java:

package com.pucrs.grupo2.Recipes.interfaces;

import java.util.List;
import com.pucrs.grupo2.Recipes.services.ServicoReceitas;
import com.pucrs.grupo2.Recipes.models.Receita;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/consulta_receita")

public class ClienteFachadaRemota {
    private ServicoReceitas sConsultaRec;

    @Autowired    
    public ClienteFachadaRemota (ServicoReceitas sConsultaRec) {
        this.sConsultaRec = sConsultaRec;
    }

    @CrossOrigin(origins = "*")
    @GetMapping("/dadosreceita")
        public Receita getDadosReceita(@RequestParam Long matricula) {
        Receita receita = sConsultaRec.getNomeReceita(matricula);
        return receita;
    }    
    
    @CrossOrigin(origins = "*")
    @GetMapping("/listareceitas")
    public List<Receita> getTabelaReceitas() {
        List<Receita> receitas = sConsultaRec.findTables();
        return receitas;
    }
    
}

Receita.java:

package com.pucrs.grupo2.Recipes.models;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "receita")
public class Receita {

    @Id
    @GeneratedValue(strategy=GenerationType.AUTO)
    private Long matricula;
    private int registro;
    private String nome;    

    public Receita() {

    }

    public Receita(int registro, String nome) {
        this.registro = registro;
        this.nome = nome;
    }
    
    
    public Long getMatricula() {
        return matricula;
    }

    
    public int getRegistro() {
        return registro;
    }

    public void setRegistro(int registro) {
        this.registro = registro;
    }

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }

    @Override
    public String toString() {
        return "Receita [matricula=" + getMatricula() + ", registro=" + getRegistro() + ", nome=" + getNome() + "]";
    }

}

RepositorioReceitas.java:

package com.pucrs.grupo2.Recipes.repositories;

import java.util.List;
import com.pucrs.grupo2.Recipes.models.Receita;
import org.springframework.data.repository.CrudRepository;
import org.springframework.data.jpa.repository.Query;

public interface RepositorioReceitas extends CrudRepository<Receita, Long> {
    List<Receita> findByMatricula(long matricula);
    List<Receita> findAll();

    @Query (value = "SELECT matricula, registro, nome FROM RECEITA", nativeQuery = true)
    List<Receita> findTables();

}

ServicoReceitas.java:

package com.pucrs.grupo2.Recipes.services;

import com.pucrs.grupo2.Recipes.models.Receita;
import com.pucrs.grupo2.Recipes.repositories.RepositorioReceitas;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class ServicoReceitas {
    private RepositorioReceitas repReceitas;
    private Receita cacheReceita;

    @Autowired
    public ServicoReceitas(RepositorioReceitas repReceitas) {
        this.repReceitas = repReceitas;
        cacheReceita = null;
    }

    public Receita getNomeReceita(long matricula) {
        List<Receita> receitas = repReceitas.findByMatricula(matricula);
        if (receitas.size() == 0){
            throw new IllegalArgumentException("Receita nao encontrada");
        } else {
            cacheReceita = receitas.get(0) ;
            return cacheReceita;
        }
    }

    public List<Receita> listaDeReceitas() {
        List<Receita> receitas = repReceitas.findAll();
        return receitas;
    }

    public List<Receita> findTables() {
        List<Receita> receitas = repReceitas.findTables();
        return receitas;
    }

}

index.html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> Retrieval by id, List Retrieval Recipes System </title>
        <link rel="stylesheet" href="style.css">
    </head>

<body>  
    <h1>Retrieval by id, Recipe List Retrieval System</h1>
      <ul>
        <li>
          <label for="matricula">id:</label>
          <input type="text" id="matricula" name="matricula">
        </li>
        <li>
          <label id="nome">Nome:</label>
          <span id="nomeReceita"> - </span>
        </li>
        <li>
          <button id="btDados">Consultar Nome</button>
          <span id="erro"></span>
        <br>
          <button id="btLista">Mostrar Lista</button>
          <span id="listareceitas"> - </span>
        </li>
      </ul>
    
    <script type="text/javascript" src="./script.js"></script>
  
</body>
</html>

style.css:

.recipes-icon {
    content:url(file:///D:/Documentos/Docs/PUCRS/FdDdSW/TF/TF-FDS/Recipes/src/main/resources/static/r_spatula.jpg);
    width: 800px;
    height: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 div {
    position: fixed;
    color: brown;
    font-family: sans-serif;
    font-size: 300%;
    left: 50%;
    bottom: 100px;
    transform:translate(-50%, -50%);
    margin: 0 auto;
    cursor: pointer;
}

 h1 {
    color: brown;
    width: 100%;
    text-align: center;
  }
  
.ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
.label {
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  
.input {
    font: 1em sans-serif;
    width: 300px;
    box-sizing: border-box;
    border: 1px solid #999;
  }
  
.input:focus {
    border-color: #000;
  }
  
.button {
    margin:auto;
    text-align: center;
  }
  
#erro {
  color:red;
  }

script.js:

//Consulta nome da receita pelo id
async function consultaNomeReceita(matricula) {
    //console.log(matricula);

    let url = "http://localhost:8080/consulta_receita/dadosreceita";
    url = url + "?matricula="+matricula;

    try {
        let resposta = await fetch(url);
        //console.log(resposta);
        if (resposta.ok){
            let dados = await resposta.json();
            //console.log(dados);
            return dados;
        }else{
            //console.log(resposta.status+", text="+resposta.statusText);
            return null;
        }
    }catch(erro){
        console.log(erro);
    }

}

//Mostra Lista Receitas
async function listaReceitas() {
    //console.log(matricula);

    let url = "http://localhost:8080/consulta_receita/listareceitas";
    //url = url + "?matricula="+matricula;

    try {
        let resposta = await fetch(url);
        //console.log(resposta);
        if (resposta.ok) {
            let dados = await resposta.json();
            //console.log(dados);
            return dados;
        } else {
            //console.log(resposta.status+", text="+resposta.statusText);
            return null;
        }
    } catch(erro) {
        console.log(erro);
    }
}

// --- início do programa
document.getElementById("btDados").onclick = async function () {
    let matricula = document.getElementById("matricula").value;
    let resposta = await consultaNomeReceita(matricula);
    if (resposta != null){
        let nome = document.getElementById("nomeReceita");
        nome.innerHTML = resposta.nome;
        erro = document.getElementById("erro");
        erro.innerHTML = "";
        //let json = document.getElementById("jsonValor");
        //json.innerHTML = JSON.stringify(resposta);
    } else {
        let nome = document.getElementById("nomeReceita");
        nome.innerHTML = " - ";
        erro = document.getElementById("erro");
        erro.innerHTML = "Erro na consulta dos dados";
    }

}

document.getElementById("btLista").onclick = async function () {
        let resposta = await listaReceitas();
        if (resposta != null){
            let tables = document.getElementById("listareceitas");
            tables.innerHTML = resposta;
            erro = document.getElementById("erro");
            erro.innerHTML = "";
            //let json = document.getElementById("jsonValor");
            //json.innerHTML = JSON.stringify(resposta);
        } else {
            let tables = document.getElementById("listareceitas");
            tables.innerHTML = " - ";
            erro = document.getElementById("erro");
            erro.innerHTML = "Erro na consulta dos dados";
        }
    
    }

Any ideas?
Project's GitHub Repo URL: Recipes system

Answer 1

As mentioned by @Bleard Rexhaj your data contains an array you can change your code to the following. Additionally, I would consider using a Javascript framework for the UI it will greatly improve the quality of your code. Some popular ones I would consider are React.js or Vue.js.

document.getElementById("btLista").onclick = async function () {
    let resposta = await listaReceitas();
    if (resposta != null){
        let tables = document.getElementById("listareceitas");
        let innerHTML = '';
        resposta.forEach(obj => {
            innerHTML += ' - ' + obj.nome;
        });
        tables.innerHTML = innerHTML;
        erro = document.getElementById("erro");
        erro.innerHTML = "";
    } else {
        let tables = document.getElementById("listareceitas");
        tables.innerHTML = " - ";
        erro = document.getElementById("erro");
        erro.innerHTML = "Erro na consulta dos dados";
    }

}

Answer 2

In your script.js file on the last block of code you are trying to display the whole JSON retrieved object, you should loop through the whole result respota and display that to the front-end: it would be something like this:

const response = await fetch('http://localhost:3000/users/'); const data = await response.json();

data.forEach(obj => {
    Object.entries(obj).forEach(([key, value]) => {
        console.log(`${key} ${value}`);
    });
    console.log('-------------------');
});

You might find this url useful as well: http://zetcode.com/javascript/jsonforeach/