JSP 中巢狀 <c:forEach> 正確渲染分類與子項的結構化寫法

問題現象

使用兩層 <c:forEach> 遍歷 ${tlist}（分類）與 ${llist}（子項），但子項未按分類分組，導致所有子項平鋪在每個分類下，頁面顯示混亂。

數據結構假設

• tlist：分類列表，每項含 typeId、typeName；
• llist：子項列表，每項含 lineId、lineName、typeId（外鍵關聯分類）。

錯誤代碼

<c:forEach items="${tlist}" var="t">
  <div class="con1-1">
    <a href="#">${t.typeName}</a>
    <c:forEach items="${llist}" var="l">  <!-- 錯誤：遍歷全部子項 -->
      <a href="#">${l.lineName}</a>
    </c:forEach>
  </div>
</c:forEach>

修正方案：在內層循環前過濾

<c:forEach items="${tlist}" var="t">
  <div class="con1-1">
    <a href="#">${t.typeName}</a>
    <c:forEach items="${llist}" var="l">
      <c:if test="${l.typeId == t.typeId}">  <!-- 關鍵：按 typeId 過濾 -->
        <a href="#">${l.lineName}</a>
      </c:if>
    </c:forEach>
  </div>
</c:forEach>

進階優化：Controller 層預分組

後端直接構建 Map<Category, List<Item>> 或 List<CategoryVO>（內含子項列表），前端單層循環即可：

<c:forEach items="${categoryList}" var="cat">
  <div class="con1-1">
    <a href="#">${cat.typeName}</a>
    <c:forEach items="${cat.items}" var="item">
      <a href="#">${item.lineName}</a>
    </c:forEach>
  </div>
</c:forEach>

優勢：邏輯清晰、減少前端判斷、便於緩存與分頁。

總結

1. 內層循環需加條件過濾（c:if），關聯外鍵字段；
2. 推薦後端預裝配樹形結構，前端只負責渲染；
3. 若數據量大，考慮 AJAX 按需加載子項，避免首屏渲染過慢。