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/