技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

htmlに出力する際のループ処理【Go】

Go

SQL（sqlite3）によってDBから取得した内容をhtmlに出力します。
テーブルから取得できる件数は、事前にはわからないため、
テンプレートとして使用するhtml側でループ処理を施す必要があります。

まずはgoファイルのSQL取得処理です。

type Candle struct {
    Time        time.Time
    Open        float64
    ...
}

type DataFrameCandle struct {
    ...
    Candles     []Candle      `json:"candles"`
}

func GetAllCandle(tableName string) (*DataFrameCandle, error) {
    cmd := fmt.Sprintf(`SELECT time, open1 FROM %s ORDER BY time DESC;`, tableName)
    rows, err := DbConnection.Query(cmd)
    defer rows.Close()
    dfCandle := &DataFrameCandle{}
    ...
    for rows.Next() {
        var candle Candle
        ...
        rows.Scan(&candle.Time, &candle.Open)
        dfCandle.Candles = append(dfCandle.Candles, candle)
    }
    err = rows.Err()
    if err != nil {
        return nil, err
    }
    return dfCandle, nil
}


続いてgoファイルのサーバー起動処理です。

var templates = template.Must(template.ParseFiles("app/views/google.html"))

func viewChartHandler(w http.ResponseWriter, r *http.Request) {
    df, _ := models.GetAllCandle("a-table")

    err := templates.ExecuteTemplate(w, "google.html", df.Candles)    // テンプレートに対してdf.Candles(型は[]Candle)を適用。スライスなのでhtml側でループ処理をする
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

func StartWebServer() error {
    http.HandleFunc("/chart/", viewChartHandler)
    return http.ListenAndServe(":8080", nil)
}


最後にhtmlファイル（同階層に作成したgoogle.html）です。
ループの対象を「range .」 「end」で囲みます。

<!-- google chartsのテンプレートを使用 -->
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                // ループの対象を「range .」 「end」で囲む
                {{ range . }}
                    ['{{.Time}}', {{.Low}}, {{.Open}}, {{.Close}}, {{.High}}],    // google chartsの仕様。1つ目は横軸ラベルを文字列指定
                {{ end}}
            ], true);

            var options = {
                legend:'none',
                candlestick: {
                    fallingColor: { strokeWidth: 0, fill: '#a52714' },
                    risingColor: { strokeWidth: 0, fill: '#0f9d58' }
                }
            };

            var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>


htmlテンプレートでは、この他にも関数を実行したりできます。

blog.y-yuki.net