How to get index of nested JSTL c:forEach from JSP to JS

Question

I've a JSP, where I display elements through JSTL c:forEach loop. This is a nested loop as shown below:

<c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
        ** Some Code **     
    <c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
            ** Some Code ** 
                    <c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">
                        <input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
                        <input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
                        <input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">

                            **Element rows displayed here**

Now, when the user selects any of the element row in the inner most loop, I've to fetch the values in JS. As you can see I'm trying to get the count of each nested loop like this:

<input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
<input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
<input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">

And trying to fetch the value of input field in JS as below:

var tierOneIndex = $('input[name="tierOneIndex"]').val();
var tierTwoIndex = $('input[name="tierTwoIndex"]').val();
var budgetItemIndex = $('input[name="budgetItemIndex"]').val();

But whatever element I select, I'm always getting:

tierOneIndex = 0
tierTwoIndex = 0
budgetItemIndex = 0

Any ideas how I can fetch the count values.

Can you share the generated HTML? – Paul Vargas Mar 13 '14 at 15:43 — Paul Vargas, Mar 13 '14 at 15:43

Gautam · Accepted Answer · 2014-05-27T08:58:55.380

In your html you can do like this

<table>

    <c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
            ** Some Code **     
        <c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
                ** Some Code ** 
                        <c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">


                            <input type="hidden" name="tierOneIndex"    id="tierOneIndex_${budgetItemCount.index}"        value="${tierOneCount.count}">
                            <input type="hidden" name="tierTwoIndex"    id="tierTwoIndex_${budgetItemCount.index}"        value="${tierTwoCount.count}">
                            <input type="hidden" name="budgetItemIndex" id ="budgetItemIndex_${budgetItemCount.index}"    value="${budgetItemCount.count}">

                            <tr class="rows" id="${budgetItemCount.index}"><td>click Here</td></tr>


    </table>

and in javascript you can do like this

$(document).ready(function(){

$("tr.rows").click(function() {
    var rowid=this.id; 

var tierOneIndex = $('#tierOneIndex_'+rowid).val();
var tierTwoIndex = $('#tierTwoIndex_'+rowid).val();                         
var budgetItemIndex = $('#budgetItemIndex_'+rowid).val(); 

    console.log("tierOneIndex:"+tierOneIndex);
    console.log("tierTwoIndex:"+tierTwoIndex);
    console.log("budgetItemIndex:"+budgetItemIndex);
});

    });

Note:

${tierOneCount.index} starts counting at 0

${tierOneCount.count} starts counting at 1

i created one sample fiddle also for you http://jsfiddle.net/9CHEb/33/

Thanks a lot for your suggestion. Your idea made me realize that it completely slipped off my mind that there are multiple elements with the same id here in DOM and every time I'm fetching the values I'm getting the value for the first element in DOM with that id, so I've to add uniqueness to the ids. — tarares, Mar 14 '14 at 14:31

score 0 · Answer 2 · edited May 23 '17 at 12:15

Similar Approach

You will find an approach in this StackOverflow Q&A link.

Solution

In detail, I would go for something like this (JSP)

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script src="/*link to jQuery*/"></script>
<script>
   $(document).ready(function() {
       $("td").click(function(event) {
           var dtoItemIdx = $(this).attr("data");
           //alert("Selected idx: " + dtoItemIdx);
           console.info("Selected idx: " + dtoItemIdx);
       });
   });
</script>

<%-- Get the size of collection --%>
<c:set var="size" scope="page" value="${fn:length(dto.items)}" />
<c:out value="There are ${size} elements in the list." />

<table>
<c:forEach items="${dto.items}" var="item" varStatus="row">

    <tr><td data="${row.index}">
    <%-- Get the current index in the loop --%>
    <c:out value="Your content i.e [row idx: ${row.index}]." />
    </td></tr>

</c:forEach>
</table>

Extensions

Instead of only one loop you can obviously nest several loops. The different index could be stored in a CSV-like structrue:

...<td data="${row.index};${product.index};${properties.index}">...

Please leave a comment if this does not solve your problem.

I went through that question. But I could not get a solution. I'll try to explain you my scenario: Suppose I'm displaying elements in jsp under a nested loop example: a[1].b[2].c[1].name. So when I call a javascript function on this element, how can I pass these index values(1 2 1) to the function? — tarares, Mar 13 '14 at 15:12

How to get index of nested JSTL c:forEach from JSP to JS

2 Answers2

Similar Approach

Solution

Extensions