MENU

【SpringBoot】Thymeleafでカテゴリ一覧をプルダウンメニューで表示させる

こんにちは、くまごろーです。
今家計簿アプリを作成しているんですが、出入金登録時に支出・収入のカテゴリを選択できるようにしようと考えています。
動作テストも兼ねて、とりあえずカテゴリ一覧をプルダウンメニューで表示させる方法を導入したので、そのやり方をまとめます。
 
 
 
1 DBにカテゴリを登録

(1)Categoryクラスを作成
エンティティクラスとして、以下のクラスを作成
 
<Category.java>(一部抜粋)

package com.example.demo.model;

~importについては省略~

@Getter
@Setter
@Entity
@Table(name="categories")
public class Category {
	
	@Id
	@NotNull
	@Column(name = "category_id", nullable = false)
	private Long categoryId;
	
	@NotBlank
	@Column(name = "category_name", nullable = false)
	private String categoryName;
	
	@NotBlank
	@Column(name = "subcategory_name", nullable = false)
	private String subcategoryName;
}

 
(2)DBにカテゴリ・サブカテゴリを登録
今回はテストなので、とりあえず「食費」に属するものをSQL文ベタ打ちで登録。

category_id category_name subcategory_name
101 食費 食費
102 食費 食料品
103 食費 朝食
104 食費 昼食
105 食費 夕食
106 食費 カフェ
107 食費 外食
108 食費 その他食費

 
 
 
2 DBからカテゴリのデータを引き出す
 
リポジトリインターフェースのfindAll()メソッドで、カテゴリ一覧を取得する。
 
<HomeController.java>(一部抜粋)

@GetMapping("/post")
  public String post(@ModelAttribute("moneyRecord") MoneyRecord moneyRecord, Authentication loginUser, Model model){
    model.addAttribute("user", userRepository.findByUsername(loginUser.getName()));
    model.addAttribute("categories", categoryRepository.findAll());  //カテゴリを全て取得してviewに渡す
    return "post";
  }

 
 
 
3 Viewファイルに以下のコードを記載

(1)プルダウンメニューを表示させるには
htmlselect,optionタグを使用する。
<例>

<select name="test">
<option value="パターン1">パターン1</option>
<option value="パターン2">パターン2</option>
<option value="パターン3">パターン3</option>
</select>

  
(2)カテゴリ一覧をviewに出力するには
Thymeleafth:eachタグを使用する。
<例>

<div th:each="record : ${records}" th:inline="text">
  ID:[[${record.recordId}]]<br>
  支出額:[[${record.incomeAndExpense}]]円
</div>

 
(1)と(2)を組み合わせると、以下の様になる。

<post.html>

<div class="form-group">
  <select class="form-control" name="category">
  <div th:each="category : ${categories}" th:inline="text">
    <option th:value="${category.categoryId}" th:field="*{categoryId}">[[${category.subcategoryName}]]</option>
  </div>
  </select>
</div>


 
実行してみると、このようになりました。

実行結果
 
 

4 参考