Question

I have searched through for this logic pretty much everywhere but am sure I haven’t done a great job and hence this question.

I have an Arraylist and it needs to be iterated and displayed in the following format

User1 User2 User3
User4 User5 User6
User7 User8 User9

I am able to do this using normal JSP scriptlets but not using JSTL. I have tried using JSTL but it skips a few entries from the list. Here is my code

    <tr>
        <c:forEach var="party" items="${partiesList}">
        <c:set var="ctr" value="${ctr+1}" scope="page"/>
        <c:choose>
        <c:when test="${ctr le 3}">
            <td>
                <figure>
                    <img src="images/${party.avatarUrl}" onclick="showHide('','${party.screenName}')" class="avaimg" alt="${party.screenName}">
                    <figcaption><spring:message code="user.${party.screenName}" text="${party.screenName}"/></figcaption>
                </figure>
            </td>
        </c:when>
        <c:otherwise>
    </tr>
    <c:set var="ctr" value="0" scope="page"/>
    </c:otherwise>
    </c:choose>
    </c:forEach>

Any help would be appreciated.

Thanks in advance

Answer 1

You can do this by using the varStatus attribute and the modulo operator (%).

<table>
  <c:forEach var="party" items="${partiesList}" varStatus="status">
    <c:if test="${status.index % 3 == 0}"><tr></c:if>
    <td>${status.index}</td>
    <c:if test="${status.index % 3 == 2}"></tr></c:if>
  </c:forEach>
</table>

varStatus will return a LoopTagStatus object, where index is

The index of the current round of the iteration. If iteration is being performed over a subset of an underlying array, java.lang.Collection, or other type, the index returned is absolute with respect to the underlying collection. Indices are 0-based.

You can use the modulo operator to check if you need to start or close a new row.

---

A different approach would be just looping through the list, output it as an unnumbered list and use CSS to style it the way you want. That’s how I would have solved it. An example of how your CSS could look:

ul.my-class { overflow: hidden; width: 600px; }
ul.my-class li { float: left; width: 200px; }