在GoLang中将Json数据映射到Html模板

时间:2016-03-12 13:25:33

标签: html json go

我正在循环我的API响应并将其添加到html模板中,如下所示

 // Following sends same information as above to the browser as html
     t, err := template.New("TopMovies").Parse(`
      {{define "TopMovies"}}
        <html>
        <ul>
        {{$ImgUrl := "http://image.tmdb.org/t/p/w185" }}
        {{range $movies := .Results}}
        <li>{{$ImgUrl}}{{$movies.PosterPath}}</li>
        <li>{{$movies.Adult}}</li>
        <li>{{$movies.Overview}}</li>
        <li>{{$movies.ReleaseDate}}</li>
        <li>{{$movies.GenreIds}}</li>
        <li>{{$movies.Id}}</li>
        <li>{{$movies.OriginalTitle}}</li>
        <li>{{$movies.OriginalLanguage}}</li>
        <li>{{$movies.Title}}</li>
        <li>{{$ImgUrl}}{{$movies.BackdropPath}}</li>
        <li>{{$movies.Popularity}}</li>
        <li>{{$movies.VoteCount}}</li>
        <li>{{$movies.Video}}</li>
        <li>{{$movies.VoteAverage}}</li>
        {{end}}
        </ul>
        </html>
      {{end}}
      `)
    err = t.ExecuteTemplate(w, "T", p) // This writes the client response
}

我的印象是我应该可以在我的html模板中调用它,

{{.TopMovies}}

但是当我运行应用程序时,数据不会显示在我调用它的html页面中。我在这里缺少什么?

我创建了一个这样的结构,

//A Page structure
type Page struct {
  Title string
  TopMovies string
}

然后我创建这样的句柄,

func TopMoviesHandler(w http.ResponseWriter, r *http.Request) {
   res, err := http.Get(url)
      if err != nil {
        panic(err)
      }
      defer res.Body.Close()

      body, err := ioutil.ReadAll(res.Body)
      if err != nil {
        panic(err)
      }
      var p Payload

      err = json.Unmarshal(body, &p)
      if err != nil {
        panic(err)
      }

  // Following sends same information as above to the browser as html
     t, err := template.New("TopMovies").Parse(`
      {{define "TopMovies"}}
        <html>
        <ul>
        {{$ImgUrl := "http://image.tmdb.org/t/p/w185" }}
        {{range $movies := .Results}}
        <li>{{$ImgUrl}}{{$movies.PosterPath}}</li>
        <li>{{$movies.Adult}}</li>
        <li>{{$movies.Overview}}</li>
        <li>{{$movies.ReleaseDate}}</li>
        <li>{{$movies.GenreIds}}</li>
        <li>{{$movies.Id}}</li>
        <li>{{$movies.OriginalTitle}}</li>
        <li>{{$movies.OriginalLanguage}}</li>
        <li>{{$movies.Title}}</li>
        <li>{{$ImgUrl}}{{$movies.BackdropPath}}</li>
        <li>{{$movies.Popularity}}</li>
        <li>{{$movies.VoteCount}}</li>
        <li>{{$movies.Video}}</li>
        <li>{{$movies.VoteAverage}}</li>
        {{end}}
        </ul>
        </html>
      {{end}}
      `)
    err = t.ExecuteTemplate(w, "T", p) // This writes the client response
}

然后在main.go

   http.HandleFunc("/TopPicks", TopMoviesHandler)

TopPicks.html

{{define "TopPicks"}}
    {{template "header" .}}
    <div class="content">
    {{.TopMovies}}
    </div>
     {{template "footer" .}}
    {{end}}

这是什么工作,

func aboutHandler(w http.ResponseWriter, r *http.Request) {
  display(w, "about", &Page{Title: "About"})
}

我可以像上次提到的那样为页面添加标题,但使用display()

在html模板中

<title>{{.Title}}</title>

我如何才能为json响应做这项工作?

2 个答案:

答案 0 :(得分:1)

看起来你正在做{{define "body"}},但后来要求ExecuteTemplate执行&#34; T&#34;在任何地方都没有定义。

我想你想要:t.ExecuteTemplate(w, "body", p)

如果您只想使用多个模板,可以通过创建主顶级模板,然后将所有部分解析为子模板来实现。

这是一个例子(on Play)。

轻松更改以浏览文件系统并加载所有模板,然后只需执行与http.Request路径匹配的模板。

package main

import "html/template"
import "os"
import "log"

var mainText = `
Normal page stuff
{{ template "_header_" . }}
{{ template "body" . }}
`

var bodyText = `
 Body has: {{ .Thing }}
`
var headerText = `
 I am header text
`

type Stuff struct {
    Thing string
}

func main() {
    t := template.New("everything")

    // parse all templates you may want
    template.Must(t.New("/").Parse(mainText))
    template.Must(t.New("_header_").Parse(headerText))
    template.Must(t.New("body").Parse(bodyText))

    if err := t.ExecuteTemplate(os.Stdout, "/", Stuff{"I am a thing"}); err != nil {
        log.Fatal("Failed to execute:", err)
    }
}

答案 1 :(得分:1)

好的,我认为原始代码存在两个问题。

  1. 处理程序正在调用错误的模板
  2. func TopMoviesHandler(w http.ResponseWriter,r * http.Request){    ...剪断原始代码...

    err = t.ExecuteTemplate(w, "T", p) // This writes the client response
    
    Should be 
    
    err = t.ExecuteTemplate(w, "TopMovies", p) // This writes the client response
    
    1. 将不正确的上下文传递给嵌套模板
    2. 在html文件中有这段代码

      {{define "TopPicks"}}
           {{template "header" .}}
           <div class="content">
                {{.TopMovies}}
                {{template "MyTemplate" . }}
           </div>
           {{template "footer" .}}
      {{end}}
      

      哪个应该是

      {{define "TopPicks"}}
           {{template "header" .}}
           <div class="content">
                {{.TopMovies}}
                {{template "MyTemplate" .TopMovies }}
           </div>
           {{template "footer" .}}
      {{end}}
      

      原因是您尝试将主要上下文传递给嵌套模板,而不仅仅是模板所期望的json结果。

      原始答案

      我举了一个简单的例子,说明我认为你需要做什么。在我设置topMovies变量的地方,您可以在此处设置api调用的结果。我希望这有助于向您展示您需要更好地遵循的顺序。

      package main
      
      import (
          "net/http"
          "text/template"
      )
      
      type movie struct {
          Title string
      }
      
      type page struct {
          Title     string
          TopMovies []movie
      }
      
      func main() {
          http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) {
              w.Header().Add("Content Type", "text/html")
      
              templates := template.New("template")
              templates.New("Body").Parse(doc)
              templates.New("List").Parse(docList)
      
              topMovies := []movie{{Title: "Movie 1"}, {Title: "Movie 2"}, {Title: "Movie 3"}}
      
              page := page{Title: "My Title", TopMovies: topMovies}
              templates.Lookup("Body").Execute(w, page)
      
          })
      
          http.ListenAndServe(":8000", nil)
      }
      
      const docList = `
      <ul >
          {{range .}}
          <li>{{.Title}}</li>
          {{end}}
      </ul>
      `
      
      const doc = `
      <!DOCTYPE html>
      <html>
          <head><title>{{.Title}}</title></head>
          <body>
              <h1>Hello Templates</h1>
              {{template "List" .TopMovies}}
          </body>
      </html>
      `