2

My goal is to load an object from the database as a json object into a vue application that is rendered in a golang template. The data should be loaded directly into the web page. Does anyone have an idea how to do this?

template.html

<html>
    <body>
      <div id="app">
        <test-component :test="{{index . obj}}"></test-component>
      </div>
    </body>
</html>

server.go

package main

import (
    "html/template"
    "io"
    "net/http"

    "github.com/labstack/echo/v4"
)

// TemplateRenderer is a custom html/template renderer for Echo framework
type TemplateRenderer struct {
    templates *template.Template
}

// Render renders a template document
func (t *TemplateRenderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {

    // Add global methods if data is a map
    if viewContext, isMap := data.(map[string]interface{}); isMap {
        viewContext["reverse"] = c.Echo().Reverse
    }

    return t.templates.ExecuteTemplate(w, name, data)
}

func main() {
  e := echo.New()
  renderer := &TemplateRenderer{
      templates: template.Must(template.ParseGlob("*.html")),
  }
  e.Renderer = renderer

  // Named route "foobar"
  e.GET("/something", func(c echo.Context) error {
    jsonStr := `{"a":"apple", "b":"banana"}`
        obj := map[string]string{}

        json.Unmarshal([]byte(jsonStr), &obj)
            return c.Render(http.StatusOK, "template.html", obj)
  }).Name = "foobar"

  e.Logger.Fatal(e.Start(":8000"))
}
2
  • test-component. What js framework are you using? Commented Sep 16, 2022 at 22:32
  • I use vueJS but it doesn´t matter, it could be any other JS-framework that get the js object injected. Commented Sep 17, 2022 at 6:17

1 Answer 1

1

I found the solution, the template was wrong.

package main

import (
    "html/template"
    "io"
    "net/http"

    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

type Template struct {
    templates *template.Template
}

func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    t.templates.Delims("[[", "]]")
    return t.templates.ExecuteTemplate(w, name, data)
}
func Hello(c echo.Context) error {
    test := `{
        "name" : "Ben",
        "country" : "Germany",
        "city" : "Berlin",
        "body":{"test":"test","test2":"test2"}
    }`
    return c.Render(http.StatusOK, "hello", test)
}

func main() {
    // Echo instance
    e := echo.New()

    t := &Template{
        templates: template.Must(template.ParseGlob("public/views/*.html")),
    }

    e.Renderer = t
    e.GET("/hello", Hello)
    // Middleware
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())

    // Start server
    e.Logger.Fatal(e.Start(":8000"))
}

HTML

{{define "hello"}}
<!doctype html>
<html lang="en">
    
<head>
    <meta charset="utf-8">
    <script>
        console.log("golangVar");
        var golangVar = '{{.}}'
        console.log(golangVar);
    </script>
 </head>
 <body>
    {{.}}
 </body>

</html>
{{end}}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.