JSTL - Dynamic dropdown/dropright menu creation in JSP, extracting data from a list

[Vladimir Razov]

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). I dont know how to approach, because i dont know how deep will submenus go.

How should JSTL loop for creating categories menu look?

[K. Tsang]

First question to ask is: Is a List the right collection to use?

From my understanding, you are having categories and their sub-categories all in a list. Assuming you have such list, how do you tell without checking the parentCategory attribute whether it's a top category or sub-category?


I'm thinking using a map with the top category as key and a list of (sub) categories as the value. eg Map<Category, List<Category>>

Then in JSTL you can use the <c:foreach> tag to loop through your collection.

[Vladimir Razov]

@K. TSang - well, i had that option on my mind too. And yes, categories and subcategories are all together in one list. Only way to know if the category is top level, is to check its parentCategory field.
As you can see i am using categoryDao.findAll(); and this method returns all categories from database:

public List<Category> findAll() {
Query q = em.createQuery("SELECT x FROM Category x");
List<Category> result = q.getResultList();
return result;
}

[K. Tsang]

Are you using Hibernate?

Anyway I'm sure you can find a way to pass a map to the JSP if you really wanted to.

[Vladimir Razov]

I am using JPA. I will try tomorow to find solution using Map instead of list (don't have time today), and then will post here what have i done.

[Vladimir Razov]

This what i have now:
servlet part:

//------Category menu and submenus----------------------
			// reads all categories from database
			List<Category> categories = categoryDao.findAll();
			
			// map will contain pairs <category, its-subcategories>
			HashMap<Category, Set<Category>> catSubcat = new HashMap<Category, Set<Category>>();
			
			for (Category category : categories)
				catSubcat.put(category, category.getCategories()); // "getCategories()" returns set of subcategories of a category
			
			ServletContext servletContext = getServletContext();
			servletContext.setAttribute("catSubcat", catSubcat);

Now, in application scope i have a map which elements are pairs(category, set-of-its-subcategories).
So, (i guess) i need proper JSTL foreach loop that will generate unordered html lists for submenus.
How to implement this foreach loop?

[K. Tsang]

For the JSTL the items attribute is your map which is Map.Entry. Then you can get the key and values

<c:forEach var="menu" items="${catSubcat}">
   category is ${menu.key}
   sub-category is ${menu.value}
</c:forEach>

[Vladimir Razov]

Hm, this is so confusing. I understand the code you posted, but still don't know how to generate for loop that will print all the submenus, because i don't know 'how deep' will submenus go.

I would like dynamicly, in a loop, reading data from map, to create something similar to this:

<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>
					      <ul class="droprightMenu">
					            <li><a href="#">Category 1.3.1</a></li>
					            <li><a href="#">Category 1.3.2</a></li>
					            <li><a href="#">Category 1.3.3</a></li>
					            <li><a href="#">Category 1.3.4</a></li>
					      </ul> 
					<li><a href="#">Category 1.4</a></li>
				</ul>
			</li>
			<li><a href="#">Category 2</a></li>
			<li><a href="#">Category 3</a></li>
				<ul class="droprightMenu">
					<li><a href="#">Category 3.1</a></li>
					<li><a href="#">Category 3.2</a></li>
					      <ul class="droprightMenu">
					            <li><a href="#">Category 3.2.1</a></li>
					            <li><a href="#">Category 3.2.2</a></li>
					      </ul> 
					<li><a href="#">Category 3.3</a></li>
					<li><a href="#">Category 3.4</a></li>
				</ul>
			<li><a href="#">Category 4</a></li>
	</ul>

Hope you understand whats the issue?

[Vladimir Razov]

I had to limit subcategories level. I have limited it to level 3. And i have implemented this using list.
So, this is the code in servlet:

//------Category menu and submenus----------------------
//        reading all categories from database

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

And these are the loops in JSP page, where am i extracting data from list and generating html markup:

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

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

									<c:if test="${catLevel1.getParentCategory()==null }">
										<li><a href="#">${catLevel1.getName() }</a> 
										
										<!-- second loop, extracting level2 categories  -->
											<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, extracting level3 categories -->
															<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>

[K. Tsang]

If your problem is only "don't know how many levels of sub-menus" then doesn't the list tells you eg list.size()?

But then not all items in the list are sub-menu, isn't it? The question to ask is why is there so many sub-menus?

menu bar              // level 0
|_ sub menu         // level 1
   |_ menu item    // level 2
   |_ menu item
   |_ menu item

This also applies to the map. The value is a list of categories.

[Vladimir Razov]

K. Tsang wrote:If your problem is only "don't know how many levels of sub-menus" then doesn't the list tells you eg list.size()?

But then not all items in the list are sub-menu, isn't it? The question to ask is why is there so many sub-menus?

This also applies to the map. The value is a list of categories.

Well, list.size() only returns all the categories, but doesn't answer the subcategory depth.
Application i am trying to implement is simple Blog application, where Category represents a category that post belongs to.
Then, administrator can manage categories and subcategories. Can add subcategories. So subcategories depth is dynamic.

Anyway, its a simple app and limiting subcategories level to 3 is acceptable.

[K. Tsang]

I see. It looks to me you are using 1 class fits all type of design making loading the list or map or whatever collection recursive X times ... just don't know what X is.

This can be improved but your design would need to be changed quite a bit I think.

But that's another day and topic