using javascript variable inside jstl

Question

I want to iterate a HashMap in javascript using jstl. is it possible to do like this?

function checkSelection(group,tvalue){
alert(group);
alert(tvalue);

<c:forEach items="${configuredGroupMap}" var="groupMap">
    alert("aa<c:out value="${groupMap.key}"/>");
    <c:if test="${groupMap.key==group}">
        alert("t<c:out value="${groupMap.key}"/>");
        <c:if test="${groupMap.value==tvalue}">
            alert("equal");
        </c:if>
    </c:if>
</c:forEach>
}

it's not going inside after

 <c:if test="${groupMap.key==group}">

Answer 1

"to iterate a HashMap in javascript using jstl" - Not possible

JSTL is executed in server side by your servlet container for which Javascript is just a text which would be skipped whereas JavaScript is executed in client side where JSTL is unknown. After the server completes processing JSTL, the generated HTML(if any) from the JSTL along with other JavaScript/HTML will be rendered.

For example, if you have this,

<c:forEach var="myItem" items="${myCollection}">
alert('<c:out value="${myItem.id}">')
<c:if test="${myItem.id == 0}"> 
   alert("zero"); 
</c:if>
</c:forEach>

If the ids of the beans in the collection are 0, 1, 2, the server renders the following to the client side by executing the above code,

alert('0')
alert('zero')
alert('1')
alert('2')

Now the browser will give you 4 alerts on loading the page (what if you have 10000 items, you will render 10000 alert statements to the browser). So the point is that you haven't iterated Java collection in JavaScript, you have simply generated a serious of Javascript statements in server iterating the collection using JSTL and you have provided those Javascript statements along with other html contents to browser.

Answer 2

It is not possible because JSP is executed first at the server side, then the JavaScript gets executed at the client side.

You can still use the c:forEach to loop through the ${configuredGroupMap}, but you cannot do the comparison across groupMap.key and group directly.

Instead, a solution in this case is to assign the server-side groupMap.key to a client-side variable in javascript first. Then use javascript for the if check, instead of c:if.

I've modified your example to below

function checkSelection(group,tvalue){ 
alert(group); 
alert(tvalue); 

<c:forEach items="${stringshm}" var="groupMap"> 
    alert("<c:out value="${groupMap.key}"/>"); 
    var groupKey = "<c:out value="${groupMap.key}"/>";

    if (groupKey == group){
        alert("<c:out value="${groupMap.key}"/>"); 

    var groupValue = "<c:out value="${groupMap.value}"/>";
        if (groupValue == tvalue){
            alert("both are equal"); 
    }
    }
</c:forEach> 
} 

Answer 3

Marimuthu has nailed it down. JavaScript and JSP/JSTL doesn't run in sync as you'd expect from the order in the coding. Java/JSP processes the page from top to bottom first, then the webserver sends the HTML/CSS/JS result to the webbrowser and finally the webbrowser processes the page (not containing any line of Java/JSP!) from top to bottom.

The best solution is to let JSP/JSTL generate a JavaScript object variable which you can later access in the JS code.

var groupMap = {
    <c:forEach items="${configuredGroupMap}" var="groupMap" varStatus="loop">
        "${groupMap.key}": "${groupMap.value}"${!loop.last ? ',' : ''}
    </c:forEach>
};

This will end up like the following in client side (rightclick page and View Source to be sure)

var groupMap = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
};

Finally rewrite checkSelection() as follows:

function checkSelection(group, tvalue) {
    if (groupMap[group] == tvalue) {
        alert("equal");
    }
}

See also:

• Communication between Java/JSP/JSF and JavaScript
• Essential JavaScript tutorial
• JSON (JavaScript Object Notation) tutorial