JSTL - Dynamic dropdown/dropright menu creation in JSP, extracting data from a list (java.util.List)

Question

MVC pattern: servlets + JSP pages. I have a class Category with (basic) look:

public class Category{
   private Integer id;
   private String name;
   private Category parentCategory;
   ...
   //getters and setters
}

This class should represent category-subcategory concept: one category can have multiple subcategories, category does not need to have a parent (top level category, parentCategory field is null), if it is a subcategory then its parentCategory field represents its parent).

In servlet, i extract all categories from database to a java.util.List object. Then i attach this list to application scope(servlet context) and forward it to JSP page.

List<Category> categories = categoryDao.findAll();
ServletContext servletContext = getServletContext();
servletContext.setAttribute("categories", categories);

Now, in JSP page, i have a navigator menu, you can see it here: http://jsfiddle.net/vvozar/tMz9A/1/ ( see menu look in jsfiddle link ) Dropdown menus are simple unordered lists in HTML, and its submenus are nested unordered lists under certain menu items. Example (static):

<nav>
            <!-- Navigation -->
            <ul class="dropdownMenu">
                <li><a href="#">Home</a></li>

                <li><a href="#">Categories</a>
                    <ul class="droprightMenu">
                        <li><a href="#">All</a>
                            <ul class="droprightMenu">
                                <li><a href="#">Category 1</a>
                                    <ul class="droprightMenu">
                                        <li><a href="#">Category 1.1</a></li>
                                        <li><a href="#">Category 1.2</a></li>
                                        <li><a href="#">Category 1.3</a></li>
                                        <li><a href="#">Category 1.4</a></li>
                                    </ul></li>
                                <li><a href="#">Category 2</a></li>
                                <li><a href="#">Category 3</a></li>
                                <li><a href="#">Category 4</a></li>
                            </ul></li>
                        <li><a href="#">Manage</a></li>
                    </ul></li>

                <li><a href="#">Profile</a>
                    <ul class="droprightMenu">
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Register</a></li>
                        <li><a href="#">Edit Profile</a></li>
                        <li><a href="#">My Posts</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul></li>

                <li><a href="#">Help</a></li>
            </ul>
        </nav>

I would like to create these menus and submenus (dynamically) by reading categories/subcategories from the list, following category hierarchy.(categories with same parent belong to same dropdown menu).

How should JSTL loop for creating categories menu look?

Answer 1

Do you know maximum level of child sub menus?

I think you should try scriplets, and recursion

Answer 2

I have limited subcategory depth level to 3. So, JSTL loops are:

        <li><a href="#">Categories</a>
            <ul class="droprightMenu">
                <li><a href="#">All</a>
                    <ul class="droprightMenu">

                        <!-- first loop, extracting categories level 1  -->
                        <c:forEach items="${categories }" var="catLevel1">

                            <c:if test="${catLevel1.getParentCategory()==null }">
                                <li><a href="#">${catLevel1.getName() }</a> 

                                <!-- second loop, extracting categories level 2  -->
                                    <ul class="droprightMenu">
                                        <c:forEach items="${categories }" var="catLevel2">

                                            <c:if test="${catLevel2.getParentCategory().getId()==catLevel1.getId() }">
                                                <li><a href="#">${catLevel2.getName() }</a> 

                                                <!-- third loop, categories level 3  -->
                                                    <ul class="droprightMenu">
                                                        <c:forEach items="${categories }" var="catLevel3">

                                                            <c:if test="${catLevel3.getParentCategory().getId()==catLevel2.getId() }">
                                                                <li><a href="#">${catLevel3.getName() }</a></li>
                                                            </c:if>

                                                        </c:forEach>
                                                    </ul></li>
                                            </c:if>

                                        </c:forEach>
                                    </ul></li>
                            </c:if>
                        </c:forEach>

                    </ul></li>
            </ul></li>