</> htmx handle json response

คราวนี้เราจะลองมาดูวิธีการรับ json response ที่เราได้รับมาจาก API เพื่อมาแสดงผลที่หน้าจอเราแบบง่ายๆกันดู โดยเราจะนำโค้ดจากครั้งที่แล้วมาเติมของให้ดูแบบนี้

index.html

<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/json-enc.js"></script>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

<div hx-ext="client-side-templates">
    <form hx-post="/api" hx-swap="innerHTML" hx-target="#content" hx-ext="json-enc" mustache-template="mytemplate">
        <div><textarea placeholder="Leave a comment here" name="message" id="message"></textarea></div>
        <div><input type="text" name="name" id="name" placeholder="name" required></div>
        <button type="submit">Submit</button>
    </form>

    <div id="content">replace here</div>

    <template id="mytemplate">
        <p> {{message}} {{name}}</p>
    </template>
</div>

จากนั้นไปดู API แบบง่ายๆเพื่อทำการทดสอบกัน

main.go

package main

import (
    "encoding/json"
    "io"
    "log"
    "net/http"
)

func main() {
    fs := http.FileServer(http.Dir("./"))
    http.Handle("/", fs)

    http.HandleFunc("/api", func(w http.ResponseWriter, r *http.Request) {
        _, err := io.ReadAll(r.Body)
        if err != nil {
            log.Fatal(err)
        }
        r.Body.Close()

        json.NewEncoder(w).Encode(map[string]string{
            "message": "test message",
            "name":    "test name",
        })
    })

    http.ListenAndServe(":8910", nil)
}

หน้าที่ของ API มีเพียงการรับ request เข้ามาแล้วตอบ json message ออกไปง่ายๆ โดยหน้าตาของ response จะเป็นแบบนี้

{
  "message": "test message",
  "name": "test name"
}

ทีนี้เรามาดูตอนรับไปแสดงผล ก่อนอื่นเราต้อง include ตัว extension เข้ามาก่อน 2 ตัวนี้

<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

จากนั้นให้ครอบตั้งแต่ form ไปจนถึง target id และ template ด้วย

<div hx-ext="client-side-templates">...</div>

เพื่อเป็นการบอกว่าเราต้องการจะ render ด้วย client-side-templates

ที่ form เราระบุ mustache-template="mytemplate" เพื่อบอกว่า response ที่ได้ เราจะใช้ mustache-template เป็น template ในการแสดงผล

จากนั้นใน template เราสามารถระบุชื่อ field ที่ได้จาก response แบบนี้

{{message}} หมายถึง field ที่ชื่อ message จาก response เลยเป็นต้น

เพียงเท่านี้เราก็สามารถนำ response date มาแสดงผลตามที่เราต้องการได้แล้วครับ