Passando uma coleção para visão

Até então passamos um único objeto para a visão, mas e se quisermos passar uma coleção de objetos? Por exemplo uma lista de produtos em vez de apenas um produto.

Para isso vamos precisar fazer algumas alterações em nosso controlador:

• Vamos adiconar uma lista no nível da classe para que essa informação possa ser compartilhada entre os métodos.
• Vamos inicializar a lista com 3 valores iniciais no construtor da classe.
• Vamos alterar os dados guardados no conteiner de dados (model) para a coleção que criamos

1
@Controller
2
public class ProductController {
3

4
    List<Product> products = new ArrayList<Product>();
5

6
    ProductController() {
7
        products.add(new Product("Notebook", "Notebook Dell", 3500.00));
8
        products.add(new Product("Smartphone", "Samsung S3", 1500.00));
9
        products.add(new Product("Monitor", "Monitor LG 24", 500.00));
10
    }
11

12
    @GetMapping("/products")
13
    public String index(Model model) {
14
        model.addAttribute("products", products);
15
        return "list";
16
    }
17

18
}

Se preferir você pode utilizar a classe Arrays para inicializar a lista com os valores iniciais:

1
@Controller
2
public class ProductController {
3

4
    List<Product> products = Arrays.asList(
5
        new Product("Notebook", "Notebook Dell", 3500.00),
6
        new Product("Smartphone", "Samsung S3", 1500.00),
7
        new Product("Monitor", "Monitor LG 24", 500.00)
8
    );
9

10
    ...

Agora precisamos alterar a visão, visto que deixamos de receber um único objeto e passamos a receber uma coleção de objetos. Para esse cenário o Thymeleaf provê um novo atributo chamado th:each que nos permite iterar sobre uma coleção de objetos com a seguinte sintaxe:

1
th:each="element : ${collection}

Onde element é o nome que você deseja dar para cada elemento da coleção e collection é a coleção que você deseja iterar.

Vamos alterar a visão list para que de fato agora ela exiba uma lista de produtos e não mais apenas um elemento.

1
<table>
2
    <tr>
3
        <th>Name</th>
4
        <th>Description</th>
5
        <th>Price</th>
6
    </tr>
7
    <tr th:each="product : ${products}">
8
        <td th:text="${product.name}"></td>
9
        <td th:text="${product.description}"></td>
10
        <td th:text="${product.price}"></td>
11
    </tr>
12
</table>

Com esse atributo podemos percorrer a coleção de produtos e exibir cada um deles em uma linha da tabela.

Rode o código no navegador, veja o código fonte gerado e perceba que apesar de termos escrito apenas uma linha da tabela (tr) em nosso código, o Thymeleaf gerou 3 linhas da tabela, uma para cada produto da coleção.