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.

Answer 1

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/

Answer 2

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.