課題解決
INSIGHT
情報・インサイト
【Spring Boot】Thymeleafの中でListやMapを生成する方法
ThymeleafだけでListやMapを生成して利用する方法をご紹介します。
List、Mapの生成方法
Listを生成する場合
${{ }}の中にカンマ区切りの値を設定します
${ { value,value,value } }
<div th:each="val : ${ { 'ノック','フック','パンチ' } }">
<p th:text="${val}"></p>
</div>
【結果】
フック
パンチ
Mapを生成する場合
${{ }}の中に「key:value」をカンマ区切りで設定します
${ {key:value, key:value} }
<th:block th:with="map=${ {fruit:'マンゴスチン', vegetable:'キャベツ', animal:'クマムシ'} }">
<p th:text="${map.fruit}"></p>
<p th:text="${map.vegetable}"></p>
<p th:text="${map.animal}"></p>
</th:block>
【結果】
キャベツ
クマムシ
MapのListを生成する場合
Listの中にMapを設定します
${ { {key:value, key:value}, {key:value, key:value} } }
<th:block th:with="list=${ { {number:'71', name:'久慈'},{number:'78',name:'平田'},{number:'84',name:'日高'} } }">
<div th:each="map : ${list}">
<p th:text="${map.number + ':' + map.name}"></p>
</div>
</th:block>
【結果】
78:平田
84:日高
利用例
Controllerから渡さずに、Thyeleafだけで生成するシーンは限られそうですが、
弊社では「パンくずリスト」のテンプレートに、各画面からMapのListを渡して利用しています。
利用時のサンプル(パンくずリスト)
テンプレート
<div layout:fragment="title(title, breadcrumbs)">
<div class="page_title">
<h2 th:text="${title}"></h2>
<div>
<ol class="breadcrumb">
<li th:each="breadcrumb : ${breadcrumbs}"
th:classappend="${#strings.isEmpty(breadcrumb.url)} ? 'active' : ''">
<a th:unless="${#strings.isEmpty(breadcrumb.url)}" th:href="@{${breadcrumb.url}}" th:text="${breadcrumb.label}"></a>
<strong th:if="${#strings.isEmpty(breadcrumb.url)}" th:text="${breadcrumb.label}"></strong>
</li>
</ol>
</div>