この記事を読んでわかること
- ネストされた構造体のスライスの中身をhtmlに表示させるための書き方
- 実際に実装してみるためのサンプルコード
サンプルコード(main.go, template.html)
先にサンプルコードを示しておく。今回はmain.goファイルとtemplate.htmlを使用する。Pathについては各自改めて設定していただきたい。
main.go
package main
import (
"html/template"
"net/http"
"log"
)
type User struct {
ID int
Name string
Email string
Todos []Todo
}
type Todo struct {
Title string
Content string
Done bool
}
func generateHTML(w http.ResponseWriter, data interface{}) {
tmpl := template.Must(template.ParseFiles("templates/template.html"))
err := tmpl.Execute(w, data)
if err != nil {
log.Println(err)
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
return
}
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
user := User{
ID: 1,
Name: "John Doe",
Email: "john@example.com",
}
todo1 := Todo{
Title: "Task 1",
Content: "Do task 1",
Done: false,
}
todo2 := Todo{
Title: "Task 2",
Content: "Do task 2",
Done: true,
}
user.Todos = append(user.Todos, todo1)
user.Todos = append(user.Todos, todo2)
generateHTML(w, user)
})
log.Println("Server started on localhost:8080")
http.ListenAndServe(":8080", nil)
}
templates/template.html
<!DOCTYPE html>
<html>
<head>
<title>User Information</title>
</head>
<body>
<h1>User Information</h1>
<p>ID: {{ .ID }}</p>
<p>Name: {{ .Name }}</p>
<p>Email: {{ .Email }}</p>
<h2>Address</h2>
{{ range .Todos}}
<p>Title: {{ .Title }}</p>
{{end}}
</body>
</html>
設定の確認
構造体について確認しておく。
main.go
type User struct {
ID int
Name string
Email string
Todos []Todo
}
type Todo struct {
Title string
Content string
Done bool
}
ここではUserという構造体とTodoという構造体を定義している。
Userという構造体には、ID, Name, Email, Todosというフィールドが存在していることがわかる。
ただTodosがスライス型であることに注意していただきたい。
また、Todoという構造体には、Title, Content, Doneというフィールドが存在する。
main.go
user := User{
ID: 1,
Name: "Tarou",
Email: "Tarou@example.com",
}
todo1 := Todo{
Title: "Task 1",
Content: "Do task 1",
Done: false,
}
todo2 := Todo{
Title: "Task 2",
Content: "Do task 2",
Done: true,
}
user.Todos = append(user.Todos, todo1)
user.Todos = append(user.Todos, todo2)
ここでは、TarouのTodoを2つ作成している。
そして、main.goファイルで
main.go
generateHTML(w, user)
このように書いたことでuser、つまりTarouの情報がhtmlに渡されている。
本題
ここでやりたいことはTarouのTodosの中のTitleを並べて表示するということである。
そこで使用するのがrangeである。
htmlの中で以下のように指定する。
template.html
{{ range .Todos }}
<p>Title: {{ .Title }}</p>
{{end}}
{{ range .Todos }}と{{end}}で括った部分がTodosの長さ分繰り返される。
そして、特に注意しなければならないのがTitleの取り出し方である。
一般的にネストされた構造体の中身を見るときは、
{{ .Todos.Title }}
とすることで確認することができるが、rangeを使う場合はその中で.Todosは不要になり、
{{ .Title }}
のみで使用することになる。
私はそれがわからず数時間悪戦苦闘することになってしまったが、皆さんはそのようなことがないことを祈っている。
最後に
初めてのQiita記事で読みにくいところがあったかもしれませんが、最後まで読んでいただきありがとうございました。