wasm-experiments/vugu/root.vugu

<div class="demo">
    <div vg-if='c.IsLoading'>Loading...</div>
    <div vg-if='len(c.PriceData.BPI) > 0'>
        <div>Updated: <span vg-html='c.PriceData.Time.Updated'></span></div>
        <ul>
            <li vg-for='c.PriceData.BPI' vg-key='key'>
                <span vg-html='key'></span> <span vg-html='fmt.Sprint(value.Symbol, value.RateFloat)'></span>
            </li>
        </ul>
    </div>
    <button @click="c.HandleClick(event)">Fetch Bitcoin Price Index</button>
</div>

<script type="application/x-go">
import "encoding/json"
import "net/http"
import "log"

type Root struct {
    PriceData bpi  `vugu:"data"`
    IsLoading bool `vugu:"data"`
}

type bpi struct {
    Time struct {
        Updated string `json:"updated"`
    } `json:"time"`
    BPI map[string]struct {
        Code string `json:"code"`
        Symbol string  `json:"symbol"`
        RateFloat float64 `json:"rate_float"`
    } `json:"bpi"`
}

func (c *Root) HandleClick(event *vugu.DOMEvent) {

    c.PriceData = bpi{}

    ee := event.EventEnv()

    go func() {

        ee.Lock()
        c.IsLoading = true
        ee.UnlockRender()
        
        res, err := http.Get("https://api.coindesk.com/v1/bpi/currentprice.json")
        if err != nil {
            log.Printf("Error fetch()ing: %v", err)
            return
        }
        defer res.Body.Close()

        var newb bpi
        err = json.NewDecoder(res.Body).Decode(&newb)
        if err != nil {
            log.Printf("Error JSON decoding: %v", err)
            return
        }

        ee.Lock()
        defer ee.UnlockRender()
        c.PriceData = newb
        c.IsLoading = false

    }()
}

</script>