🔧 </htmx> handle json response

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/json-enc.js"></script>
<script src="https://unpkg.com/[email protected]/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>

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)
}

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

<script src="https://unpkg.com/[email protected]/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

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