Home > Article > Backend Development > 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
- WBOYforward
- 2024-02-08 21:20:09360browse
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!