java动态生成菜单，jsp页面有没有什么好的遍历方法

Question

jsp代码如下，只遍历到3级，4567级要继续遍历下去重复代码太多了，有没有好的解决办法？
没有父级id是一级菜单，有父级id没有url是有子菜单的二级菜单，以此类推

<c:forEach items="${menu }" var="target">

    <!-- 没有parentId,有url的是一级菜单 -->
    <c:if test="${empty target.parentId  and !empty target.url }">
        <li><a href='<c:url value="${target.url }"></c:url>'> <i
                class="${target.icon }"></i>${target.name }
        </a></li>
    </c:if>
    <!-- 没有parentId,也没有url的菜单是有二级菜单的 -->
    <c:if test="${empty target.parentId  and empty target.url  }">
        <li><i class="${target.icon }"></i>${target.name }
            <ul>
                <c:forEach items="${target.childMenus }" var="childMenu">
                    <!-- 有url的没有子菜单 -->
                    <c:if test="${!empty childMenu.url }">
                        <li><a href='<c:url value="${childMenu.url }"></c:url>'>
                                <i class="${childMenu.icon }"></i>${childMenu.name }
                        </a></li>
                    </c:if>
                    <!-- 三级菜单 -->
                    <c:if test="${empty childMenu.url }">
                        <i class="${childMenu.icon }"></i>${childMenu.name }
                        <ul>
                            <c:forEach items="${childMenu.childMenus }" var="thirdMenu">
                                <!-- 有url的没有子菜单 -->
                                <c:if test="${!empty thirdMenu.url }">
                                    <li><a href='<c:url value="${thirdMenu.url }"></c:url>'>
                                            <i class="${thirdMenu.icon }"></i>${thirdMenu.name }
                                    </a></li>
                                </c:if>
                                <!-- 四级菜单 -->
                                <c:if test="${empty thirdMenu.url }">
                                    <c:forEach items="${thirdMenu.childMenus }" var="fourthMenu">
                                        <li>
                                            <a href='<c:url value="${fourthMenu.url }"></c:url>'>
                                                <i class="${fourthMenu.icon }"></i>${fourthMenu.name }
                                            </a>
                                        </li>
                                    </c:forEach>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </c:if>
                </c:forEach>
            </ul>
        </li>
    </c:if>
</c:forEach>

菜单数据：
Menu [id=1, name=Forms, parentId=, url=forms.html, icon=fa fa-edit, order=0, childMenus=null]
Menu [id=2, name=UI Elements, parentId=, url=, icon=fa fa-wrench, order=1, childMenus=[Menu [id=3, name=Buttons, parentId=2, url=buttons.html, icon=, order=0, childMenus=null], Menu [id=4, name=Icons, parentId=2, url=icons.html, icon=null, order=1, childMenus=null]]]
Menu [id=5, name=Multi-Level Dropdown, parentId=, url=, icon=fa fa-sitemap, order=2, childMenus=[Menu [id=6, name=Second Level Item, parentId=5, url=second.html, icon=null, order=0, childMenus=null], Menu [id=7, name=Third Level, parentId=5, url=null, icon=, order=1, childMenus=[Menu [id=8, name=Third Level Item, parentId=7, url=, icon=null, order=0, childMenus=[Menu [id=9, name=Fouth Level, parentId=8, url=fouth.html, icon=null, order=0, childMenus=null]]]]]]]

数据库截图：

Answer 1

用树插件然后异步加载吧。这样子做太麻烦了

Answer 2

用javascript

Answer 3

先将数据结构转成树形，形状如：

[{
   id:1,children:[{id:2,children:[]}]
},
{
  id:3,children:[{id:4,children...}]}...
]

然后就可以用递归判断构建一个menu树了,伪代码如下:

buildTree(list){
  for(node in list){
     if(node.children){
         buildTree(node.children)
     }else{
         buildNode(node);
     }
  }
}