How to generate div's dynamically by iterating map using jstl in jsp page?

Question

I have a snippet of html like below in my jsp page which works fine if I start the service since everything is static. As you can see below I am showing different images within div <div class="row templatemorow">. Only the images url is different and all other classes, fields are same.

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >
    <!-- First Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/1.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/1.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Second Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/2.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/2.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now I am trying to make this dynamic as I already have image url in a map so I just need to figure out how to iteare this map and generate div <div class="hex col-sm-6"> dynamically by changing the image url in it? I am using JSTL here.

I have a string to string map called holder in which key is title and value is full image url with http so I need to iterate this holder map and generate div dynamically with different image url. So If I have 10 entries in the map then there should 10 div with class="hex col-sm-6" generated dyanmically I guess.

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >

    <c:forEach var="e" items="${images.holder}">

    <!-- iterate holder map and generate div's accordingly -- >


</div>

I am new to JSTL so I am not able to understand how can I generate these div's dynamically by iterating the holder map in my JSP page.

score 2 · Accepted Answer · answered Jun 23 '16 at 19:56

I'm not sure I understand what should be the expected result at the end so let me just give you some inputs.

To iterate over the entries of a Map and to get the value and the key of the current entry we proceed as next:

<c:forEach var="entry" items="${myMap}">
  Key: <c:out value="${entry.key}"/>
  Value: <c:out value="${entry.value}"/>
</c:forEach>

So here for example, it would be something like:

<c:forEach var="e" items="${images.holder}">
<div class="hex col-sm-6">
    <div>
        <div class="hexagon hexagon2 gallery-item">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-image: url(<c:out value="${e.value}"/>);">
                    <div class="overlay">
                        <a href="<c:out value="${e.value}"/>" data-rel="lightbox" class="fa fa-expand"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</c:forEach>

NB: This is meant to give you the main idea not to give you the complete solution.

Thanks a lot. This works perfectly fine. Also if I need to know whether I am iterating first element or second element or third element in a map, how can I do that? I just need an indication basically I need to add a check with if statement that if it is the first element then do this and if it is second element, then do that. — user1950349, Jun 23 '16 at 20:45
check this http://stackoverflow.com/questions/4862605/increment-counter-with-loop — Nicolas Filotto, Jun 24 '16 at 08:12
and this http://stackoverflow.com/questions/4587397/how-to-use-if-else-option-in-jstl — Nicolas Filotto, Jun 24 '16 at 08:13

score 0 · Answer 2 · answered Jun 23 '16 at 20:07

You can always use EL expressions to get any value that is in lopping.

<c:forEach items="${images.holder}" var="e">
           <div class="hex col-sm-6">
               <img src="${e.value}"/>
           </div>     
    </c:forEach>

The code above will generate "X" divs where X is the length of the map. Let's assume your map has 3 values. This values have their keys.

Then your JSP page will generate 3 divs like:

<div class="hex col-sm-6">
     <img src="img/blabla/mypng2.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng4.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng5.png"/>
</div>

How to generate div's dynamically by iterating map using jstl in jsp page?

2 Answers2