0

Olá sou iniciante em desenvolvimento web e gostaria de saber se é necessário realizar a conversão do objeto java enviado para o html para javaScript para acessar suas propriedades/atributos.

Exemplo: Estou enviando um objeto java pelo controller que manda uma model

model.addAttribute("itens", notaEntradaItemBO.lista());

isso é enviado quando minha página é carregada

eu deixei esses dados em uma div

<div id ="tabelaItens" th:value="${itens}"></div>

eu puxei o valor utilizando isso no script

<script>
var listaItens = document.getElementById("tabelaItens").getAttribute("th:value")

// após isso ser feito eu posso utilizar o objeto para testar de forma normal?
//exemplo:

for(item of listaItens){
  if(item.categoria == categoriaPassada){
   // fazer alguma coisa tipo item.nome em uma linha de uma tabela e dps mandar a tabela para uma 
   div 
   // depois enviar a tabela para uma div contendo apenas os itens da categoria

}
}

</script>

Obs: Essa parte pra colocar os dados do item em uma tabela e o enviar para a div eu ja sei como fazer. minha dúvida é quanto a utilização do objeto, se eu posso utiliza-lo dessa forma ou tem algum tipo de conversão necessária.

2
  • de forma direta . Thymeleaf renderizar a página que possui informações sobre objeto o mesmo pode ser acessado pelo JavaScript. nao tem nenhuma conversao. 27/04 às 18:43
  • Obrigado. uma dúvida eu posso pegar esse objeto contendo a lista direto em uma variável dentro do script?(caso tenha como se tiver como me explicar agradeço)ou tenho que fazer dessa forma tipo coloco como valor em uma tag e puxo ela através do document
    – Irlan
    27/04 às 20:03

2 Respostas 2

0

O Thymeleaf já cuida disso para vc, basta usar a sintaxe especial que ele exige e pronto. Veja um exemplo:

@GetMapping("/")
String hello(Model model) {
  record User(int id, String name) { }

  model.addAttribute(
    "users",
    List.of(new User(1, "João"), new User(2, "Maria"))
  );

  return "hello";
}

E o seu template ficaria assim:

<body>
  <script th:inline="javascript">
    const users = /*[[ ${ users } ]]*/ [];

    for (const user of users) {
      console.log(user);
    }
  </script>
</body>

É esse /*[[${users}]]*/ que faz o negócio acontecer. O Thymeleaf chama de JavaScript Natural Template. Do ponto de vista do JavaScript, isto é apenas um comentário comum, porém, ao processar o template, o Thymeleaf vai substituir pelo valor vindo do seu controller. Ele substitui o comentário ignorando tudo o que vem depois dele, ou seja, ele vai ignorar aquele array vazio que está ali apenas como uma espécie de placeholder.

Vc poderia fazer direto assim:

const users = [[${users}]];

Mas como é uma sintaxe não válida em JS, a sua IDE vai reclamar do erro. Por isso é melhor fazer como fiz no exemplo, pois vc satisfaz a IDE e o Thymeleaf cuida do resto para vc.

Vc pode usar espaços dentro dos colchetes e dentro das chaves, /*[[ ${ users } ]]*/, mas não pode haver espaços em /*[[ e nem em ]]*/.

E não esqueça do th:inline="javascript", hein!

Para mais informações, veja: https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#javascript-inlining

0

O @wldomiciano já respondeu como você pode pegar sua lista e fazer o Thymeleaf alimentar seu código JavaScript para manipular a DOM por script, porém você pode manipular as listas com th:each, podendo utilizar, por exemplo, <div> ou <table> para montar sua estrutura.

Por exemplo, você tem uma lista de Itens, cada Item tem um nome e um atributo, você pode utilizar <div>com th:each que o Thymeleaf vai fazer um loop (laço) e replicar a div conforme a quantidade de itens da lista. Se tiver 100 itens, serão criadas 100 divs.

<div th:each="item : ${itens}">
    Id do Item: <span th:text="${item.id}">item nome</span>
    Nome do Item: <span th:text="${item.nome}">item nome</span>
    Descrição do Item: <span th:text="${item.descricao}">atributo item</span>
</div>

Perceba que o th:each funciona parecido com For Each do Java (https://www.w3schools.com/java/java_foreach_loop.asp), ou seja, na expressão item : ${itens}, o item representa literalmente cada item da lista.

Em uma tabela fica mais fácil de entender, segue abaixo exemplo utilizando a tag <table>:

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Nome</th>
            <th>Descrição</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="item : ${itens}">
            <td th:text="${item.id}">Id do Item</td>
            <td th:text="${item.nome}">Nome do Item</td>
            <td th:text="${item.nome}">Descrição do Item</td>
        </tr>   
    </tbody>
</table>

No link Iteration in Thymeleaf (Baeldung) tem mais sobre a iteração em lista com Thyleaf. (inglês)

Fiz também este projeto: DESAFIO-MVC, disponível no GitHub, nele utilizei Thymeleaf e iterações de lista e até uma iteração com Map.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .