0

我有一个 Go Web 服务器，我想在其中显示 JSON 文件的内容..

main.go 读取文件并将数据放入结构中。当我直接遍历结构中的数据时，我可以像这样在终端中打印数据：

第 1 组

会员1

会员2

会员3

第 2 组

会员1

会员2

会员3

这是我在我的 html 中想要的，以便我可以设置它的样式。

当我将数据发送到模板时，我得到以下信息

第 1 组

[会员1 会员2 会员3]

第 2 组

[会员1 会员2 会员3]

在我看来，GroupMembers 是作为一个字符串进来的。我想知道如何让模板将它们作为单独的元素读取，以便我可以添加 html（例如 a <br>）。

我的代码由以下 3 个文件组成。

main.go 文件：

package main

import (
    "bytes"
    "encoding/json"
    "fmt"
    "html/template"
    "io/ioutil"
    "net/http"

    "github.com/dimchansky/utfbom" //used for removing BOM from utf-8
)

//import struct
type dataStruct struct {
    GroupName    string   `json:"name"`
    GroupMembers []string `json:"Members"`
}

type Request struct {
}

//File path
const jsonImport = "./static/JSONFiles/OUdata.json"

func main() {

    http.HandleFunc("/", pageHandler)
    http.ListenAndServe(":2323", nil)
}

func pageHandler(w http.ResponseWriter, r *http.Request) {
    //read file
    theJson, err := ioutil.ReadFile(jsonImport)
    if err != nil {
        fmt.Print(err)
    }
    //get rid of BOM
    data, err := ioutil.ReadAll(utfbom.SkipOnly(bytes.NewReader(theJson)))
    if err != nil {
        fmt.Println(err)
        return
    }

    //make a new struct
    var theData []dataStruct

    //put the JSON into a struct
    err = json.Unmarshal(data, &theData)
    if err != nil {
        fmt.Println("error!!", err)
    }

    //loop through and print JSON in terminal
    for i := 0; i < len(theData); i++ {
        fmt.Println(theData[i].GroupName)
        for j := 0; j < len(theData[i].GroupMembers); j++ {
            fmt.Println(theData[i].GroupMembers[j])
        }

    }
    //Print test of 1 GroupMember in terminal
    fmt.Println(theData[0].GroupMembers[1])

    p := theData
    t, _ := template.ParseFiles("rolegrouppage.html")
    t.Execute(w, p)
}

html 模板文件（rolegrouppage.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hiya Buddy!</title>
</head>
<body>
  {{range .}}
  <h1>
    {{.GroupName}}
</h1>

<h4>
  
  {{.GroupMembers}}
  
</h4> 

{{end}}

</body>
</html>

和数据文件（OUdata.json）：

[
    {
        "name":  "Group 1",
        "Members":  [
                        "Mrs Smith",
                        "Ms Sigmundsdottir",
                        "Mr Arnason"
                    ]
    },
    {
        "name":  "Group 2",
        "Members":  [
                        "Mrs Gunnarsdottir",
                        "Mr Bjarnason",
                        "Ms Sturludóttir",
                        "Mrs Grímsdóttir",
                        "Mr Rafnkelsson"
                    ]
    }
]

实现这一目标的最佳方法是重新格式化 JSON 文件并以不同的方式循环遍历它吗？或者有没有办法从 html/模板访问每个“元素”？

4

1 回答 1

1

您需要range越过该GroupMembers字段，就像您对theData值进行测距一样。

<body>
{{ range . }}
  <h1>{{ .GroupName }}</h1>
  {{ range .GroupMembers }}
  <h4>{{ . }}</h4>
  {{ end }}
{{ end }}
</body>
于 2021-09-26T09:09:09.547 回答