Thymeleaf iterate through a nested list to create table <th> title and the <td> text for golf app

huangapple go评论59阅读模式
英文:

Thymeleaf iterate through a nested list to create table <th> title and the <td> text for golf app

问题

以下是您要翻译的内容:

Hi, I'm relatively new with Spring and Thymeleaf, but I am creating a disc golf CRUD app, and I'm able to add a course with a Course object which has a one-to-many relation to ParList. All works fine; I can add a course, but a course doesn't always have 18 holes. How can I show this dynamically so a 9-hole course's table has 9 columns, a 14-hole course has 14 columns, etc?

I have tried using th:each="par, iterStat : ${course.parLists}" and trying to use iterStat.index, but I can't quite get it. So how can I get the index of the list and use it in the hole number <th> and display the course's par <td> without repeating like I have below?

So my data looks like this:

Course{id=3, name='Legende Main', parLists=[ParList{parListId=10, parHole1='3', parHole2='3', parHole3='3', parHole4='3', parHole5='3', parHole6='3', parHole7='3', parHole8='3', parHole9='3', parHole10='', parHole11='', parHole12='', parHole13='', parHole14='', parHole15='', parHole16='', parHole17='', parHole18=''}]}

我的HTML代码:

<div class="container" th:each="course : ${courses}">
    <div class="border">
        <div id="courseDetails" class="row">
            <div class="col-sm-4">
                <p><strong>Course Name:</strong>
                    <a th:text="${course.name}"></a>
                </p>
            </div>
        </div>
    </div>
    <div>
        <table th:each="par, index : ${course.parLists}" id="courseInfo" class="table table-bordered w-auto">
            <tr>
                <th th:text="${'Hole'}"></th>
                <th th:text=""></th>
                <th th:text="${'#2'}"></th>
                <th th:text="${'#3'}"></th>
                <th th:text="${'#4'}"></th>
                <th th:text="${'#5'}"></th>
                <th th:text="${'#6'}"></th>
                <th th:text="${'#7'}"></th>
                <th th:text="${'#8'}"></th>
                <th th:text="${'#9'}"></th>
                <th th:text="${'#10'}"></th>
                <th th:text="${'#11'}"></th>
                <th th:text="${'#12'}"></th>
                <th th:text="${'#13'}"></th>
                <th th:text="${'#14'}"></th>
                <th th:text="${'#15'}"></th>
                <th th:text="${'#16'}"></th>
                <th th:text="${'#17'}"></th>
                <th th:text="${'#18'}"></th>
                <th>Actions</th>
            </tr>

            <tr>
                <td th:text="${'Par'}"></td>
                <td th:text="${par.parHole1}"></td>
                <td th:text="${par.parHole2}"></td>
                <td th:text="${par.parHole3}"></td>
                <td th:text="${par.parHole4}"></td>
                <td th:text="${par.parHole5}"></td>
                <td th:text="${par.parHole6}"></td>
                <td th:text="${par.parHole7}"></td>
                <td th:text="${par.parHole8}"></td>
                <td th:text="${par.parHole9}"></td>
                <td th:text="${par.parHole10}"></td>
                <td th:text="${par.parHole11}"></td>
                <td th:text="${par.parHole12}"></td>
                <td th:text="${par.parHole13}"></td>
                <td th:text="${par.parHole14}"></td>
                <td th:text="${par.parHole15}"></td>
                <td th:text="${par.parHole16}"></td>
                <td th:text="${par.parHole17}"></td>
                <td th:text="${par.parHole18}"></td>
                <td>

New Course

<form action="#" th:action="@{/discgolf/saveCourse}" th:object="${newCourse}" method="POST">
    <div class="form-group">
        <input type="text" th:field="*{name}" placeholder="Course name" class="form-control mb-4 col-4">
    </div>
    <th:block th:object="${hole}">
        <div class="container">
            <div id="parRow" class="row g-0">
                <div class="col">
                    <label>#1</label>
                    <input type="text" th:field="*{par}" placeholder="#1">
                </div>
                #2 - #17
                <div class="col">
                    <label>#18</label>
                    <input type="text" th:field="*{par}" placeholder="#18">
                </div>
            </div>
        </div>
    </th:block>
    <button type="submit" class="btn btn-info col-2">Save Course</button>
</form>
英文:

Hi Im relatively new with Spring and Thymeleaf but I am creating a disc golf CRUD app and I'm able to add a course with a Course object which has a oneToMany relation to ParList. All works fine I can add a course but a course doesnt always have 18 holes. How can I show this dynamically so a 9 hole courses table has 9 columns, a 14 - 14 columns etc?
I have tried using th:each="par, iterStat : ${course.parLists}" and trying to use iterStat.index but I can't quite get it.
So how can I get the index of the list and use it in the hole number <th> and display the courses par <td> without repeating like I have below?
So my data looks like this:

Course{id=3, name=&#39;Legende Main&#39;, parLists=[ParList{parListId=10, parHole1=&#39;3&#39;, parHole2=&#39;3&#39;, parHole3=&#39;3&#39;, parHole4=&#39;3&#39;, parHole5=&#39;3&#39;, parHole6=&#39;3&#39;, parHole7=&#39;3&#39;, parHole8=&#39;3&#39;, parHole9=&#39;3&#39;, parHole10=&#39;&#39;, parHole11=&#39;&#39;, parHole12=&#39;&#39;, parHole13=&#39;&#39;, parHole14=&#39;&#39;, parHole15=&#39;&#39;, parHole16=&#39;&#39;, parHole17=&#39;&#39;, parHole18=&#39;&#39;}]}

My HTML

&lt;div class=&quot;container&quot; th:each=&quot;course : ${courses}&quot;&gt;
        &lt;div class=&quot;border&quot;&gt;
            &lt;div id=&quot;courseDetails&quot; class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-sm-4&quot;&gt;
                    &lt;p&gt;&lt;strong&gt;Course Name:&lt;/strong&gt;
                        &lt;a th:text=&quot;${course.name}&quot;&gt;&lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div &gt;
            &lt;table th:each=&quot;par, index : ${course.parLists}&quot; id=&quot;courseInfo&quot; class=&quot;table table-bordered w-auto&quot;&gt;
                &lt;tr &gt;
                    &lt;th th:text=&quot;${&#39;Hole&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#2&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#3&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#4&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#5&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#6&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#7&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#8&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#9&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#10&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#11&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#12&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#13&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#14&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#15&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#16&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#17&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th th:text=&quot;${&#39;#18&#39;}&quot;&gt;&lt;/th&gt;
                    &lt;th&gt;Actions&lt;/th&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td th:text=&quot;${&#39;Par&#39;}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole1}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole2}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole3}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole4}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole5}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole6}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole7}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole8}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole9}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole10}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole11}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole12}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole13}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole14}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole15}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole16}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole17}&quot;&gt;&lt;/td&gt;
                    &lt;td th:text=&quot;${par.parHole18}&quot;&gt;&lt;/td&gt;
                    &lt;td&gt;

Thymeleaf iterate through a nested list to create table <th> title and the <td> text for golf app

New Course

&lt;form action=&quot;#&quot; th:action=&quot;@{/discgolf/saveCourse}&quot; th:object=&quot;${newCourse}&quot;
					  method=&quot;POST&quot;&gt;
					&lt;div class=&quot;form-group&quot;&gt;
					&lt;input type=&quot;text&quot; th:field=&quot;*{name}&quot;
						   placeholder=&quot;Course name&quot; class=&quot;form-control mb-4 col-4&quot;&gt;
					&lt;/div&gt;
					&lt;th:block  th:object=&quot;${hole}&quot;&gt;
					&lt;div class=&quot;container&quot;&gt;
						&lt;div id=&quot;parRow&quot; class=&quot;row g-0&quot;&gt;
							&lt;div class=&quot;col&quot;&gt;
								&lt;label&gt;#1&lt;/label&gt;
								&lt;input type=&quot;text&quot; th:field=&quot;*{par}&quot; placeholder=&quot;#1&quot;&gt;
							&lt;/div&gt;
							#2 - #17
							&lt;div class=&quot;col&quot;&gt;
								&lt;label&gt;#18&lt;/label&gt;
								&lt;input type=&quot;text&quot; th:field=&quot;*{par}&quot; placeholder=&quot;#18&quot;&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
					&lt;/th:block&gt;
					&lt;button type=&quot;submit&quot; class=&quot;btn btn-info col-2&quot;&gt;Save Course&lt;/button&gt;
				&lt;/form&gt;

答案1

得分: 1

如果您的 parHole 是一个 List&lt;Int&gt;Map&lt;Int,Int&gt;,那么您可以像处理任何列表一样使用 th:each 迭代它或它的条目。但是,由于您针对每个 parHole 有静态字段名称,您无法这样做,您必须像您的示例中那样重复。

英文:

If your parHole would be a List&lt;Int&gt; or Map&lt;Int,Int&gt; then you could iterate over it or its entries with th:each like with any list. But as you have static field names for each parHole you can't do it and you have to be repetetive like in your example.

答案2

得分: 1

根据Tarmo的回答,如果我是你,我会将你的parList转换为一个孔的列表,将“Hole”和“Par”添加为列表的第一个值,以便它们可以作为表格的标题行包含在其中,然后对它们进行迭代。然后你可以在你的:each迭代器中使用索引来跟踪孔的编号。

英文:

Following Tarmo's answer, if I were you, I would convert your parList to a List of holes, add the "Hole" and "Par" as the first values in your list so they can be included as the header rows in your table, and then iterate over them. Also then you could then use index in your :each iterator to keep track of your hole numbers

huangapple
  • 本文由 发表于 2023年2月18日 23:26:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75494349.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定