JSTL & JavaScript

[Samuel Lugo]

Hello,
I'm trying to populate a JavaScript array variable with a specific data variable from a List of bean (a class that contains data variables with getters and setters--I think that's called a bean) objects passed in on the request. For instance, I have a List of bean objects, each with a firstName and lastName variable (with getters and setters for each variable). From that List, I want to populate a JavaScript array variable with as many first names as there are bean objects (each which contain a firstName variable) in the List. Would anyone know of a clever way of doing so using JSTL? Is it even possible? Any help would be greatly appreciated.

lugos

[Bear Bibeault]

Seems pretty straight-forward to me; no cleverness required. You'd iterate over the list like any other using <c:forEach> and then use template text and EL expressions to build up the Javascript.

Why not give it a go and post what you come up? We can help you out with any foibles you might encounter.

[Ben Souther]

As far as the server knows, Javascript is just text -- no different from HTML or any other text.

Just loop through your bean and write out the JS elements to the page.


[you beat me, this time]
[ July 27, 2005: Message edited by: Ben Souther ]

[Samuel Lugo]

Hello,

I was able to get it to work...

// This line is inside another function and the variable is declared elsewhere.
listOfNames = populateArray();

function populateArray() {
<c:forEach items="${list}" var="listOfNames">
names[i] = "<c ut value='${listOfNames.name}' escapeXml='false' />";
i = i + 1;
</c:forEach>
return names;
}

I had thought of something like this before, but I didn't think "i" would be incremented in a JSTL loop (I'm fairly new to JSTL). I thought I would have to have it in a JavaScript loop. I suppose using a JSTL tag like <c:set var="i" value="${0}" /> and then incrementing it with <c:set var="i" value="${i + 1}" /> could also work. I haven't tried it though.

Thanks for the help,
lugos

[Bear Bibeault]

It would be instructive for you to do a View Source to see how your question about incrementing i is resolved.

Also, you could clean up your Javascript a bit (removing the need to increment i) by using the push() method of the Javascript array, or, since this is all being set up on server before sending the page to the browser, by using a Javascript array initializer.
[ July 27, 2005: Message edited by: Bear Bibeault ]

[Garrett Smith]

Keep your java code and jstl out of js.

<c:set var="names"  scope="page">
Mary, Emi, Reiko, Kaori, Makie, Erika 
</c:set>
<script>
// Grab variable from JSTL.
var  sNames = "<c:out value="${names}"/>";
 
var nameArray = sNames.split(/,\s*/)
alert(nameArray[1].length)
</script>

[ July 28, 2005: Message edited by: Garrett Smith ]

[Bear Bibeault]

Since the OP doesn't have the string of names as a comma-separated list, but rather already in a collection, this solution isn't very applicable.

Using the split method of the JS String could be somewhat clever in other situations however (though I'd still prefer doing the processing on the server rather than deferring it to client-side mechanisms).
[ July 28, 2005: Message edited by: Bear Bibeault ]

[Garrett Smith]

Then replace the "[" and "]" with "".


"[apple, pear, love, salad]". replace(/^\[|\]$/g, "");

"apple, pear, love, salad".split(",");


It's kind of messy and harder to manage when the server side code has js mixed in it. I've had the misfortune of dealing with mixed code on more than a few projects.

It's cleaner and simpler to output only strings to javascript and deal with them there.
[ July 29, 2005: Message edited by: Garrett Smith ]

[Orton K Randy]

Samuel Lugo wrote:
I had thought of something like this before, but I didn't think "i" would be incremented in a JSTL loop (I'm fairly new to JSTL). I thought I would have to have it in a JavaScript loop. I suppose using a JSTL tag like <c:set var="i" value="${0}" /> and then incrementing it with <c:set var="i" value="${i + 1}" /> could also work. I haven't tried it though.

Sorry for bringing this up, but can anyone confirm if the bold content above would work? I tried that inside a nested:iterate and am getting

Error 500: java.lang.ClassCastException: java.lang.Long incompatible with java.lang.Integer

error. Any idea why?

[Stefan Evans]

Doing it explicitly, you can make use of the forEach loops status variable to get a current count.

function populateArray() {
<c:forEach items="${list}" var="oneName" varStatus="status">
  names[${status.index}] = "${oneName.name}";
</c:forEach>
return names;
}

alternatively you could do

names[names.length] = "${oneName.name}";

And as has already been pointed out, you can intialise an Array using the constructor passing in all values, which is slightly less verbose.
Something like this:

function populateArray() {
names = new Array(
<c:forEach items="${list}" var="oneName" varStatus="status">
  "${oneName.name}"
  <c:if test="${not status.last}">,</c:if>
</c:forEach>
  );
return names;
}

The gotcha on this second syntax, is that it will fail if there is only one item in the list, as it assumes the method is the one that specifies how many elements should be in the javascript array.

[Bear Bibeault]

joseph prabhu,
Your post was moved to a new topic.