Javascript 使用来自WebSocket的JSON的Golang模板范围（用于循环）

我正在使用Gorilla Websocket更新一些HTML（img src、text等）；我是这样做的：

mt, message, err := c.ReadMessage()
if err != nil {
    log.Println("read:", err)
    break
}
[...]
app, err := models.DB.SearchAppStore(ctx, stars, updatedWithin, 0)
myJson, err := json.Marshal(app)
err = c.WriteMessage(mt, myJson)
if err != nil {
    log.Println("write:", err)
    break
}

然后我使用javascript以这种方式更新HTML数据：

ws.onmessage = function(evt) {
    var d = JSON.parse(evt.data);
    var app;
    for (app = 0; app < 3; app++) {
      document.getElementById("app-icon-" + app).src = d[app].ThumbnailURL;
      document.getElementById("app-title-" + app).innerHTML = d[app].Title;
      document.getElementById("app-compatibility-" + app).innerHTML = d[app].Compatibility;
    }
  };

<div class="app-section">
  <div class="icon">
    <img src="" id="app-icon-0">
  </div>
  <div class="details">
    <h2 id="app-title-0"></h2>
    <h5 id="app-compatibility-0"></h5>
  </div>
</div>

ws.onmessage=函数（evt）{
var d=JSON.parse（evt.data）；
var-app；
对于（app=0；app<3；app++）{
document.getElementById（“应用程序图标-”+app）.src=d[app].ThumbnailURL；
document.getElementById（“应用程序标题-”+app）.innerHTML=d[app].title；
document.getElementById（“应用程序兼容性-”+app）.innerHTML=d[app]。兼容性；
}
};

然后我用以下方式手动键入HTML：

ws.onmessage = function(evt) {
    var d = JSON.parse(evt.data);
    var app;
    for (app = 0; app < 3; app++) {
      document.getElementById("app-icon-" + app).src = d[app].ThumbnailURL;
      document.getElementById("app-title-" + app).innerHTML = d[app].Title;
      document.getElementById("app-compatibility-" + app).innerHTML = d[app].Compatibility;
    }
  };

<div class="app-section">
  <div class="icon">
    <img src="" id="app-icon-0">
  </div>
  <div class="details">
    <h2 id="app-title-0"></h2>
    <h5 id="app-compatibility-0"></h5>
  </div>
</div>

您可以在HTML'id'中看到0，我应该注意它要长得多，但我尝试只获取相关部分

我当然不想手动键入HTML，因为这会使处理不同长度的应用程序变得困难（/不可能）（比如有时我想显示100个应用程序，有时可能只有3个可用，等等）

我想这可以通过golang的HTML{{range}}函数实现，但我不知道如何将它与WebSocket中的json数据集成

另一个应该是可管理的解决方案是在JS for循环中的

ws.onmessage

处写出所有HTML，但我认为如果我学会了如何使用golang模板包来实现这一点会更好。。特别是因为它非常长，并且有许多类/id

在我看来，我需要得到JSON的长度（

Object.keys（d.length；

），然后我需要在{range}}内传递这个长度，然后可以使用{{index}在JSON对象中交互

---

…但我还没弄明白怎么做，也许根本不可能。。我非常感谢您提供的帮助。

一个简单的方法是在服务器上执行模板，并将生成的HTML发送到客户端，在客户端将HTML插入页面

使用已编译的模板声明包级别变量。 此模板假定要执行的参数是 结构或带有字段缩略图URL、标题和兼容性的映射

var t = template.Must(template.New("").Parse(`{{range .}}
  <div class="icon">
   <img src="{{.ThumbnailURL}}">
  </div>
  <div class="details">
   <h2>{{.Title}}</h2>
   <h5>{{.Compatibility}}</h5>
  </div>{{end}}`))

在页面上为结果包含一个div：

<div class="app-section"></div>

---

此解决方案不使用JSON。

这似乎是您应该从JavaScript中执行的操作。您可以使用

document.createElement（）

动态创建新元素。从代码中动态创建DOM非常常见，因此存在一个框架ReactJS用于此目的。嗯，我也在研究document.createElement/jquery解决方案，因为我不知道如何使用golang模板包来实现它，只是觉得它太乱了。。我也一直在为是否将ReactJS集成到项目中而挣扎，因为我担心学习它会太耗时。。但我想这是值得的。。谢谢，这太棒了，这正是我所希望的，而不是用jquery/document.createElement。。非常感谢你！！