Backend Development
Golang
Issue showing options in selector on web page: Data for loop {{ range }} not passed in Go template
Issue showing options in selector on web page: Data for loop {{ range }} not passed in Go template
In the process of web development, sometimes you will encounter some problems, such as some display options when using selectors. One of the common problems is that loop data is not passed in Go templates. This issue may cause the selector to not display options correctly. To solve this problem, we need to inspect and adjust the data passing in Go templates. In this article, PHP editor Shinichi will introduce how to solve this problem and provide some practical tips and suggestions. Let’s take a look!
Problem content
The problem is that on a web page that uses a selector to select a product type, the options (values) within the selector are not displayed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Список продуктов</h1>
<form id="addProductForm">
<label for="productName">Product Name:</label>
<input type="text" id="productName" name="productName" required>
<label for="weight">Weight:</label>
<input type="number" id="weight" name="weight" required>
<label for="typeSelect">Product Type:</label>
<select class="form-control" id="typeSelect" name="TypeID">
{{ range .Rows}}
<option value="{{.ProductType.IDType}}">{{ .ProductType.NameType }}</option>
{{ end }}
</select>
<label for="unit">Unit:</label>
<input type="text" id="unit" name="unit" required>
<label for="description">Description:</label>
<input type="text" id="description" name="description" required>
<label for="pricePickup">Price Pickup:</label>
<input type="number" id="pricePickup" name="pricePickup" required>
<label for="priceDelivery">Price Delivery:</label>
<input type="number" id="priceDelivery" name="priceDelivery" required>
<button type="button" onclick="addProduct()">Add Product</button>
</form>
<table id="productTable">
<tr>
<th>ID продукта</th>
<th>ID типа</th>
<th>Название продукта</th>
<th>Вес</th>
<th>Единица измерения</th>
<th>Описание</th>
<th>Цена самовывоза</th>
<th>Цена с доставкой</th>
</tr>
{{range .Rows}}
<tr>
<td>{{.ProductID}}</td>
<td>{{.ProductType.NameType}}</td>
<td>{{.ProductName}}</td>
<td>{{.Weight}}</td>
<td>{{.Unit}}</td>
<td>{{.Description}}</td>
<td>{{.PricePickup}}</td>
<td>{{.PriceDelivery}}</td>
</tr>
{{end}}
</table>
<script>
function addProduct() {
// Получение данных из формы
var form = document.getElementById("addProductForm");
var formData = new FormData(form);
// Отправка данных на сервер
fetch("/add_product", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
// Обработка ответа от сервера
console.log("Product created:", data);
// Очистка формы или выполнение других действий при необходимости
form.reset();
})
.catch(error => console.error("Error:", error));
}
</script>
</body>
</html>Although this part of the code with the table output works just fine
{{range .Rows}}
<tr>
<td>{{.ProductID}}</td>
<td>{{.ProductType.NameType}}</td>
<td>{{.ProductName}}</td>
<td>{{.Weight}}</td>
<td>{{.Unit}}</td>
<td>{{.Description}}</td>
<td>{{.PricePickup}}</td>
<td>{{.PriceDelivery}}</td>
</tr>
{{end}}I want to get the data itself from the table that represents this structure
package product_types
type ProductTypes struct {
IDType string `json:"type_id"`
NameType string `json:"type_name"`
}The result of the current code now looks like this
Result 1
I tried changing it to this
<label for="typeSelect">Product Type:</label>
<select class="form-control" id="typeSelect" name="TypeID">
{{ range .Rows}}
<option value="{{.ProductType.IDType}}">{{ .ProductType.NameType }}</option>
{{ end }}
</select>The results got better, but at the end there were duplicates
result2
Solution
I found the answer to the problem - I did not add the path to the ProductTypes table in app.go
} else if req.URL.Path == "/products.html" {
log.Printf("Обслуживание HTML-файла: %s\n", productsHTMLPath)
dataRows, err := repoProduct.FindAllProduct(context.TODO()) // Используйте функцию для получения продуктов
if err != nil {
http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
return
}
dataRows1, err := repo.FindAll(context.TODO()) // Используйте функцию для получения типов продуктов
if err != nil {
http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
return
}
tmpl, err := template.ParseFiles(productsHTMLPath)
if err != nil {
http.Error(res, fmt.Sprintf("Не удалось парсирование шаблона: %v", err), http.StatusInternalServerError)
return
}
Rows := struct {
Products []products2.Product
ProductTypes []product_types2.ProductTypes
}{
Products: dataRows,
ProductTypes: dataRows1,
}
err = tmpl.Execute(res, Rows)
if err != nil {
http.Error(res, fmt.Sprintf("Не удалось выполнить шаблон: %v", err), http.StatusInternalServerError)
}
}The initial code looks like this:
} else if req.URL.Path == "/products.html" {
log.Printf("Обуслуживание HTML-файла: %s\n", productsHTMLPath)
dataRows, err := repoProduct.FindAllProduct(context.TODO()) // Используйте функцию для получения продуктов
if err != nil {
http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
return
}
tmpl, err := template.ParseFiles(productsHTMLPath)
if err != nil {
http.Error(res, fmt.Sprintf("Не удалось парсирование шаблона: %v", err), http.StatusInternalServerError)
return
}
err = tmpl.Execute(res, struct{ Rows []products2.Product }{dataRows})
if err != nil {
http.Error(res, fmt.Sprintf("Не удалось выполнить шаблон: %v", err), http.StatusInternalServerError)
}
}product.html：
<label for="typeSelect">Product Type:</label>
<select class="form-control" id="typeSelect" name="TypeID">
{{ range .ProductTypes}}
<option value="{{.IDType}}">{{ .NameType }}</option>
{{ end }}
</select>The above is the detailed content of Issue showing options in selector on web page: Data for loop {{ range }} not passed in Go template. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do you use the pprof tool to analyze Go performance?
Mar 21, 2025 pm 06:37 PM
The article explains how to use the pprof tool for analyzing Go performance, including enabling profiling, collecting data, and identifying common bottlenecks like CPU and memory issues.Character count: 159
How do you write unit tests in Go?
Mar 21, 2025 pm 06:34 PM
The article discusses writing unit tests in Go, covering best practices, mocking techniques, and tools for efficient test management.
How do I write mock objects and stubs for testing in Go?
Mar 10, 2025 pm 05:38 PM
This article demonstrates creating mocks and stubs in Go for unit testing. It emphasizes using interfaces, provides examples of mock implementations, and discusses best practices like keeping mocks focused and using assertion libraries. The articl
How can I define custom type constraints for generics in Go?
Mar 10, 2025 pm 03:20 PM
This article explores Go's custom type constraints for generics. It details how interfaces define minimum type requirements for generic functions, improving type safety and code reusability. The article also discusses limitations and best practices
How can I use tracing tools to understand the execution flow of my Go applications?
Mar 10, 2025 pm 05:36 PM
This article explores using tracing tools to analyze Go application execution flow. It discusses manual and automatic instrumentation techniques, comparing tools like Jaeger, Zipkin, and OpenTelemetry, and highlighting effective data visualization
Explain the purpose of Go's reflect package. When would you use reflection? What are the performance implications?
Mar 25, 2025 am 11:17 AM
The article discusses Go's reflect package, used for runtime manipulation of code, beneficial for serialization, generic programming, and more. It warns of performance costs like slower execution and higher memory use, advising judicious use and best
How do you use table-driven tests in Go?
Mar 21, 2025 pm 06:35 PM
The article discusses using table-driven tests in Go, a method that uses a table of test cases to test functions with multiple inputs and outcomes. It highlights benefits like improved readability, reduced duplication, scalability, consistency, and a
How do you specify dependencies in your go.mod file?
Mar 27, 2025 pm 07:14 PM
The article discusses managing Go module dependencies via go.mod, covering specification, updates, and conflict resolution. It emphasizes best practices like semantic versioning and regular updates.
