프론트 개발 3 (th:block, th:each, th:each 중첩)

앞선 글에서 중첩된 th:each 에서 필드값이 조회가 안되었다.

 

1. th:block

---

th:block은 동일한 thymeleaf attribute(th:if, th:each)를 적용할수있도록 한다.

<th:block th:each = "coffee : ${coffeeOptions}">
   <h3 th:text = "${coffee.name}">Coffee Name</h3>
   <p th:text = "${coffee.description}">Info</p>
</th:block>

 

즉 위와 같은 코드의 경우 coffeOptions에서꺼낸 coffee를 th:block내에서 유효하게 사용이 가능.

 

 

2. th:block, th:each

---

th:block은 동일 block 내에서 th:each도 동일하게 적용을 해준다.

이를 이용하면 중첩된 반복문도 가능하다.

즉 block 내에서 th:each가 계속 살아있도록 해줌.

<th:block th:each = "shop : ${shops}">  <!-- Iterate through shops -->
   <p th:text = "${shop.name}">Shop name</p>
   <ul>
      <!-- Iterate through coffeeOptions -->
      <th:block th:each = "flavor : shop.coffeeOptions">
         <li th:text="${flavor}"></li>
      </th:block>
   </ul>
</th:block>

 

 

3. 코드 수정

---

th:block과 th:each를 같이 적용해줬다.

th:block이 없으면 th:each가 중첩될 시 뒤에 나온 th:each가 제대로 동작하지 않는 건가..?

<th:block th:each="path : ${result.pathList}" class="accordion-item" th:field="${path}">
    <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <table>
                <tr>
                    <b><td th:text="${path.totalTime}+분"><b>소요시간(분) </b></td></b>
                </tr>
                <tr>
                    <td th:text="${path.totalDistance}+m">이동거리(미터)</td>
                </tr>
            </table>
        </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            <table class="table table-striped" >
                <th:block th:each="subPath : ${path.subPathList}">
                    <!--li th:text="${subPath.toString()}"></li-->
                    <tr>
                        <!--span th:text="${subPath?.trafficType}?:'데이터 없음'"></span-->
                        <li th:object="${subpath}"  th:if="${subPath?.trafficType} == 3" th:text="|걷기 ${subPath?.sectionTime}분|">도보 이동거리</li>
                    </tr>
                    <tr>
                        <!--span th:text="${subPath?.trafficType}?:'데이터 없음'"></span-->
                        <li th:object="${subpath}"  th:if="${subPath?.trafficType} == 2" th:text="|${subPath?.startName}정류장 ${subPath.lane.busNo}번 승차|">버스탑승</li>
                    </tr>
                    <tr>
                        <!--span th:text="${subPath?.trafficType}?:'데이터 없음'"></span-->
                        <li th:object="${subpath}"  th:if="${subPath?.trafficType} == 2" th:text="|${subPath?.endName}정류장 하차|">버스하차</li>
                    </tr>
                    <tr>
                        <!--span th:text="${subPath?.trafficType}?:'데이터 없음'"></span-->
                        <li th:object="${subpath}"  th:if="${subPath?.trafficType} == 1" th:text="|${subPath?.startName} ${subPath.lane.name} 승차|">지하철 승차</li>
                    </tr>
                    <tr>
                        <!--span th:text="${subPath?.trafficType}?:'데이터 없음'"></span-->
                        <li th:object="${subpath}"  th:if="${subPath?.trafficType} == 1" th:text="|${subPath?.endName}역 하차|">지하철 하차</li>
                    </tr>
                </th:block>
            </table>
        </div>
    </div>
</th:block>

 

 

4. View

---

원하는 대로 이동 경로가 출력되었다.

 

5.GitHub: 220124 Front 4(th:bock, th:each, nested loop)

---