JSP variable into javascript

[Klament J. Kruoghst]

Hi,

I was unsure if this goes into JSP or javascript forum but here it goes:

I have in my jsp the request session a Map object and a List object. I need to assign this to javascript and be able to use the map in the javascript as any other object javascript variable.

In JSP:

Map objectMap = request.getAttribute(mymap);
List objectList = request.getAttribute(mylist);

<script language="JavaScript" >
var mymap= new Map('<%=objectMap%>');
var mylist = new List('<%objectList%>');
alert (mymap.get('foo'));
alert (mylist.get(1));
</script>

but that doesn't work... how can I do this?

Thanks

[Bear Bibeault]

First, I see you are still using scriptlet expressions. That's over 9 years (9 years ) out of date. Time to update to the JSTL and EL.

Remember that a JSP is just a template for an HTML page, so you can't assume that the JavaScript (that won't be evaluated until it's on the client) knowns anything about Java. It doesn't.

So you need to construct an equivalent JavaScript construct to the Map and List. As it turns out, a JavaScript Object is a pretty good approximation of a Map, and an array can serve as a List.

What you want to create for the Map is a construct such as:

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

and for the List:

var myList = [value1,value2,value3];

The <c:forEach> JSTL tag can be used to iterate through the List and Map in order to construct these structures.

[Klament J. Kruoghst]

Hey Bear thanks for your response.

Can you give me an example of how to use the <c:forEach> to construct those structures? because I'm a bit confused as to how that populates the javascript map and list.

I'm actually using "<logic:iterate>" since I use struts but the logic should be the same so that'll work for me, but I'd like to know how I can populate that from the jsp iteration to the javascript.

Thanks a lot for your help

[Bear Bibeault]

If you are going to use Struts tags, let me know and I'll move this post. Personally, I never use proprietary tags when standard ones are available to do the same thing.

[Klament J. Kruoghst]

Hey Bear,

Lets leave it at <c:forEach> then. I'm more concern about the logic of populating the javascript object than the iteration on jsp.

Thanks!

[Bear Bibeault]

Something along the lines of: <script> var myMap = { <c:forEach items="${theMap}" var="item" varStatus="loop"> ${item.key}: '${item.value}' ${not loop.last ? ',' : ''} </c:forEach> }; </script>

This assumes that the Map instance has been created as a scoped variable named theMap, and that the Map values are strings. If your values are numeric, then omit the quotes. If they are of mixed types, things get a little trickier because you got to decide when to put quotes and when not to. (But not too tricky, just a little).

[Stefan Evans]

Just to give this a bit more background, you want to use JSON (JavaScript Object Notation) - which is what Bear has actually employed here.


There are a number of libraries around for converting Java objects to their JSON representations (eg flexjson) You can get a complete list from www.json.org

Potentially you could replace the <c:forEach> loop with a library call to convert your java Map into JSON format for you.

[Bear Bibeault]

Stefan Evans wrote:Just to give this a bit more background, you want to use JSON (JavaScript Object Notation) - which is what Bear has actually employed here.

Well, sort of. The JavaScript object literal syntax and JSON are very similar (as one would expect as the former was the basis for the latter), but they are not identical. What I'm generating here, for example, is not valid JSON, though it is a valid object literal.

The idea of simply injecting JSON into the page to server as an object literal will usually work, but could break down for more complex contrusts.

[Stefan Evans]

Hmmm. I was under the impression that JSON was a subset of javascript literal object syntax, and that any JSON object would be valid javascript.

What is it about the generated code that makes it invalid JSON?

[Bear Bibeault]

Valid JSON must have the key values quoted, and only using double quotes. Object literal syntax only requires key quoting if the key is not a valid identifier, and allows either single or double quotes.

Valid JSON is almost always valid object literal syntax, until you hit some unlikely corner cases (binary stuff, if I recall).

[Bear Bibeault]

P.S. Lots of early JSON parsers/generators are pretty lax with the rules. But that's changing as JSON is becoming more main-stream and things are tightening up.

[Klament J. Kruoghst]

Oh I see thanks so much Bear... I didn't know we could use jsp code inside javascript, now it makes more sense to me what you were saying.

I'm going to give it a try, thanks so much you helped me big time!

[Stefan Evans]

I didn't know we could use jsp code inside javascript

Just to clarify, it is not exactly using jsp code inside javascript.

It is using jsp code to generate javascript code onto the page as template text.

So following the JSP lifecycle, java is executed on the server, and thus the jstl foreach tag is evaluated, and emits html/javascript text.

The page loads in your browser (viewing source will show you the script block with all the data in it) and THEN javascript starts running.

[Bear Bibeault]

Indeed, pay careful attention to what Stefan posted. This is not using JSP inside JavaScript. It is using JSP to create the JavaScript.

If you have any doubts at all about this, you can read this article for a more detailed explanation.

[Klament J. Kruoghst]

So I finally got the opportunity to try this out and I'm stuck in one thing.

I added a test Map with 4 elements in it in my java code and here's what I see in the source code after I added the exact same code from Bear:

<script>
function setProdCodes(){
   var myMap = {
		
       	${item.key}: '${item.value}' ${not loop.last ? ',' : ''}
        
       	${item.key}: '${item.value}' ${not loop.last ? ',' : ''}
        
       	${item.key}: '${item.value}' ${not loop.last ? ',' : ''}
        
      	${item.key}: '${item.value}' ${not loop.last ? ',' : ''}
        
   };
}
</script>

Shouldn't I bee seeing something like

<script>
function setProdCodes(){
   var myMap = {
		
       	1: 'My value1',
        
       	2: 'My value2',
        
       	3: 'My value3',
        
      	4: 'My value4'
        
   };
}
</script>

At least I know it is getting the object from Java because the size is indeed 4 elements.

Help please, thanks

[Bear Bibeault]

If you are seeing the ${} notation, then your web app is misconfigured such that the EL is disabled.

See the JSP FAQ for properly configuring the web app. In particular, be sure that your web.xml is not declared using the Servlets 2.3 DTD.

[Bear Bibeault]

P.S. Using numeric values for property keys in not valid JavaScript. You'll need to notate them as strings.

[Klament J. Kruoghst]

Thanks for the quick response bear!

yes they're strings here's how I'm creating the map in java:

myMap = new HashMap();
myMap.put("1", "myValue 1");
myMap.put("2", "myValue 2");
myMap.put("3", "myValue 3");
myMap.put("4", "myValue 4");

Also I'm using somewhere else in this same jsp expresions such as:
<c:if test="${myTest == 'something'}">
wouldn't that fail also if EL was disabled?

[Bear Bibeault]

Klament J. Kruoghst wrote:yes they're strings here's how I'm creating the map in java:

That's immaterial. You are formatting them as numeric values in the script. That will fail.

Also I'm using somewhere else in this same jsp expresions such as:
<c:if test="${myTest == 'something'}">
wouldn't that fail also if EL was disabled?

It is most likely failing.

What does ${3+4} emit? If it's not 7, your app is misconfigured.

[Klament J. Kruoghst]

i just checked the web.xml and it does say "DTD Web Application 2.3"

Some of the ${} does work as i mentioned before though, it does not fail it's part of the app that's working.

how can I bypass this without changing the version? that's something i cannot control.

Thanks Bear.

[Stefan Evans]

If you are using Servlet2.3/JSP1.2 then you will have to be using JSTL1.0
I presume your taglib import is like this? <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
rather than <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> (the difference being the extra /jsp in the middle)

What server are you using? What version?

If you are stuck with this version then you have the following limitations:
EL expressions will only work within the JSTL tags. So to get it to work if you can't update your application, everywhere you have ${expr} on its own change it to <c:out value="${expr}"/>
You will not be able to use EL functions. So things like getting the size of a list/string is difficult.

Basically you are coding for an equivalent of Tomcat 4, not taking advantage of the newer server features that have been developed in the last 8-10 years.

[Klament J. Kruoghst]

you're correct stefan, the import is just as you presumed.

So given that updating the version is out of the question for the time being I tried Stefan's suggestion to put the c:out everywhere and it all works.

Thanks for all the help!