Java側で取得した2次元配列をThymeleafで受け取りWeb上に表示させたい。

初心者のため、大変恐縮ですが、ぜひお力添えをお願いいたします。

前提・実現したいこと

配列の学習のため、多次元配列を使い九九表をWeb上に表示させたい。

Java側で九九の計算結果を取得し、ビュー側で受け取りWeb上に九九表を表示させたい。

発生している問題・エラーメッセージ

Springbootアプリケーションで表示させると、要素がすべて文字列になってしまいます。

デバッグで確認したところ、Java側で配列の値は確認できました。
ビュー側に値を渡したところ、どうやらHTML側も二次元配列に合わせないといけないとのことで、その先のコードの記述がわからずにいます。

該当のソースコード

Java
1import org.springframework.stereotype.Controller;
2import org.springframework.ui.Model;
3import org.springframework.web.bind.annotation.RequestMapping;
4import org.springframework.web.bind.annotation.RequestMethod;
5
6@Controller
7public class CountNumberWeb {
8
9	
10	@RequestMapping(value = "/count", method = RequestMethod.GET)
11
12	public String kukuList(Model model) {
13
14
15		int[][] kuku = new int[9][9];
16
17		for (int i = 1; i <= 9; i++) {
18
19			for (int j = 1; j <= 9; j++) {
20
21				kuku[i - 1][j - 1] = i * j;
22			}
23		}
24		model.addAttribute("kuku", kuku);
25		
26		return "count";
27	}
28}
29

HTML
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3	xmlns:th="http://www.thymeleaf.org">
4<head>
5<meta charset="UTF-8">
6
7<title>Count</title>
8</head>
9
10<style type="text/css">
11th {
12	width: 100px;
13}
14
15table,tr,th,td {
16	border: 1px solid #bbb; text-align: center;
17}
18</style>
19
20<body>
21	<h1>九九表</h1>
22
23	<table>
24		<tr>
25			<!-- 表　見出し -->
26			<th>九九表</th>
27			<th th:each="i : ${#numbers.sequence(1, 9)}" th:value="${i}"
28				th:text="${i}"></th>
29		</tr>
30		    
31		    <th:block  th:each="left : ${#numbers.sequence(1, 9)}" th:value="${left}">
32			
33		 <tr>
34		    <!-- 縦の数字 -->
35			<td th:text="${left}"></td>
36			
37			<th:block th:each="right : ${#numbers.sequence(1, 9)}" th:value="${right}">
38					
39			<!-- 表の中身 -->
40			<td th:text="${kuku}"></td>
41			</th:block>
42	     </tr>
43	</table>
44
45</body>
46</html>
47

試したこと

多次元ではなく、通常の配列でも表示可能か試しました。

コードを書いてみましたがうまく動作せず、
1行につき9項目（1×1~1×9）の配列がさらに9行分(~9×9まで)の配列で囲っているという
考え方をしたのですが、自分にはコードに表すことができませんでした、、、

初心者のため文章に表すのも難しく、伝わりにくい部分も多々あるとは思いますが、
よろしくお願いいたします。

m.ts10806

2021/09/21 09:43

Thymeleaf上で計算式を書かないのでしたらnumbers.sequenceはあんまり意味がないです。

dodox86

2021/09/21 10:02

課題なのでしょうかね。もしJava自体が初心で、加えてHTML、サーブレット、Spring Boot、Thymeleaf を同時にってかなり敷居が高い気がするのですが。（職場で求められているのであれば気の毒に思う程）

sga11

2021/09/22 00:29 編集

< m.ts10806様やはりそうですか、、、今回は配列をJava側で作成したので、 numbers.sequenceは見出しなどに使わせていただきます。

行動規範の内容に同意します

回答1件

自己解決

何とか自力で解決することができました。
Javaのコードはそのまま。

HTML
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3	xmlns:th="http://www.thymeleaf.org">
4<head>
5<meta charset="UTF-8">
6
7<title>Count</title>
8</head>
9
10<style type="text/css">
11td {
12	width: 60px;
13}
14
15table, td {
16	border: 1px solid #bbb;
17}
18</style>
19
20<body>
21	<h1>九九表</h1>
22
23	<!-- 0～8 で eachで回す-->
24
25	<table>
26		<tr>
27			<td th:each="kuku : ${kuku}" th:text="${kuku[0]}"></td>
28		</tr>
29		<tr>
30			<td th:each="kuku : ${kuku}" th:text="${kuku[1]}"></td>
31		</tr>
32		<tr>
33			<td th:each="kuku : ${kuku}" th:text="${kuku[2]}"></td>
34		</tr>
35		<tr>
36			<td th:each="kuku : ${kuku}" th:text="${kuku[3]}"></td>
37		</tr>
38		<tr>
39			<td th:each="kuku : ${kuku}" th:text="${kuku[4]}"></td>
40		</tr>
41		<tr>
42			<td th:each="kuku : ${kuku}" th:text="${kuku[5]}"></td>
43		</tr>
44		<tr>
45			<td th:each="kuku : ${kuku}" th:text="${kuku[6]}"></td>
46		</tr>
47		<tr>
48			<td th:each="kuku : ${kuku}" th:text="${kuku[7]}"></td>
49		</tr>
50		<tr>
51			<td th:each="kuku : ${kuku}" th:text="${kuku[8]}"></td>
52		</tr>
53	</table>
54</body>
55</html>