在HTML模板中调用/发送实际的JSON数据或结构体切片（Golang实现）

在HTML模板中调用/发送实际的JSON数据或结构体切片（Golang实现）

type MyStruct struct {
      Name       string
      Duration   string
           .....
           }
         func template1(w http.ResponseWriter, r *http.Request) {
         //Send actual data to track instance.(having problem here to send data)
        track := MyStruct {
	Name:MyStruct.Name,
	Duration:MyStruct.Duration,
	& other members so on..
       }

fp := path.Join("name.html")
tmpl, err := template.ParseFiles(fp)
if err != nil {
	http.Error(w, err.Error(), http.StatusInternalServerError)
	return
}
if err := tmpl.Execute(w, track); err != nil {
	http.Error(w, err.Error(), http.StatusInternalServerError)
}
 }

我是Go语言的新手。实际上我需要通过结构体切片的成员将JSON数据传递到HTML模板中。但是在使用实例发送这些数据时遇到了问题（在正确发送数据方面做错了什么）。下面是有问题的代码部分。

提前感谢。


更多关于在HTML模板中调用/发送实际的JSON数据或结构体切片（Golang实现）的实战教程也可以访问 https://www.itying.com/category-94-b0.html

8 回复

你的JSON数据在哪里？我想应该不在 MyStruct 变量中吧？

更多关于在HTML模板中调用/发送实际的JSON数据或结构体切片（Golang实现）的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


现在，将这些格式为 MyStruct 的数据调用到 HTML 索引文件中。 希望您明白我的意思！ 谢谢

go_learning:

track := MyStruct {
Name:MyStruct.Name,
Duration:MyStruct.Duration,

这不是正确的语法。你想实现什么功能？

实际上，我的程序通过API获取了JSON数据。正如我所说，我需要创建一个HTML模板文件，将特定数据部分（这里是MyStruct部分）保存到索引文件中。但我很困惑如何通过实例正确传递数据，或者是否有其他方法可以实现这一点？

获取内容函数是否需要为每个传入请求调用一次？如果是这样，就在那里调用它，将结果存储在局部变量中并传递给模板。如果只需要执行一次，就在启动HTTP服务器之前调用它，并将结果放在包（顶层）变量中。

如果介于两者之间，需要在HTTP服务器运行时更新，就需要添加一些并发处理。这会稍微复杂一些，所以先从其他机制开始，直到熟悉其工作原理。

我有另一个包含类似数据的函数：

func get_content() {
// json 数据
url := " url name"
res, err := http.Get(url)
// 错误检查
body, err := ioutil.ReadAll(res.Body)
if err != nil {
panic(err.Error())
}
var data MyStruct
err = json.Unmarshal(body, &data)
if err != nil {
panic(err.Error())
}
fmt.Printf("Results: %v\n", data)

}

我阅读了您的评论并尝试修复但未能成功。实际上，我有一些结构体，通过API获取JSON数据并在另一个函数中进行反序列化，这部分工作完全正常。但是当我尝试编写模板函数（尝试通过结构体调用这些数据）时，因为需要通过HTML文件显示信息，比如我在文件中写了{{.Name}}，需要从定义的结构体中调用这些数据（在8080端口的本地服务器上）。当我这样写：var collect structure_name，并在执行行中给出这个参数时，本地服务器页面上没有显示任何内容。如果我在HTML模板函数内部单独定义结构体，比如collect := structure{ Name string 等等}{Name: “Alice”}，并在执行行中使用这个变量，它可以正常显示姓名，但无法通过结构体显示JSON数据。

需要指导！ 提前感谢。

在您的代码中，主要问题是您试图直接使用结构体类型名而不是实例来赋值。以下是修正后的实现，展示如何将结构体切片作为JSON数据传递到HTML模板中：

type MyStruct struct {
    Name     string `json:"name"`
    Duration string `json:"duration"`
    // 其他字段...
}

func template1(w http.ResponseWriter, r *http.Request) {
    // 创建结构体切片
    tracks := []MyStruct{
        {
            Name:     "Track 1",
            Duration: "3:45",
        },
        {
            Name:     "Track 2", 
            Duration: "4:20",
        },
        // 添加更多数据...
    }

    // 将切片转换为JSON
    jsonData, err := json.Marshal(tracks)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    fp := path.Join("name.html")
    tmpl, err := template.ParseFiles(fp)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    // 创建模板数据，包含JSON字符串
    data := struct {
        TracksJSON string
    }{
        TracksJSON: string(jsonData),
    }

    if err := tmpl.Execute(w, data); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

在HTML模板中（name.html），您可以通过JavaScript访问JSON数据：

<!DOCTYPE html>
<html>
<head>
    <title>Track Data</title>
</head>
<body>
    <div id="tracks-container"></div>

    <script>
        // 解析Go模板传递的JSON数据
        const tracksData = JSON.parse('{{.TracksJSON}}');
        
        // 在JavaScript中使用数据
        tracksData.forEach(track => {
            console.log(`Name: ${track.name}, Duration: ${track.duration}`);
            
            // 动态创建HTML元素显示数据
            const trackElement = document.createElement('div');
            trackElement.innerHTML = `
                <h3>${track.name}</h3>
                <p>Duration: ${track.duration}</p>
            `;
            document.getElementById('tracks-container').appendChild(trackElement);
        });
    </script>
</body>
</html>

如果您想在模板中直接使用结构体切片（不使用JSON），可以这样修改：

func template1(w http.ResponseWriter, r *http.Request) {
    tracks := []MyStruct{
        {
            Name:     "Track 1",
            Duration: "3:45",
        },
        {
            Name:     "Track 2",
            Duration: "4:20",
        },
    }

    fp := path.Join("name.html")
    tmpl, err := template.ParseFiles(fp)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    // 直接传递结构体切片到模板
    if err := tmpl.Execute(w, tracks); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

对应的模板使用方式：

{{range .}}
<div class="track">
    <h3>{{.Name}}</h3>
    <p>Duration: {{.Duration}}</p>
</div>
{{end}}

第一种方法（JSON方式）更适合需要在客户端JavaScript中处理数据的场景，第二种方法（直接模板渲染）更适合简单的服务端渲染。

回到顶部