html - Passing array from .jsp to javascript function

Question

I have a Liferay portlet where I pass a String array from action phase to render phase in my .jsp file. I am able to access the array and iterate through it like this:

<c:forEach var="item" items="${arrayItems}"> 
    <p>${item}</p>
</c:forEach> 

This is just to check that passing the data works fine... However, I would like to pass this whole array to my javascript function (that handles rendering the data to canvas). Any idea how to do this?

So far, I have tried the following:

<%

String[] items;
items = new String[((String[])request.getAttribute("arrayItems")).length];
items = ((String[])request.getAttribute("arrayItems"));

%>

<script>
    displayItems(<% arrayItems %>);
</script>

and also

<script>
        displayItems(${arrayItems});
</script>

I know that this is probably very basic question, but there are not many tutorials about passing data in portlets on web (and when I found any, the approach worked only for single Strings, not arrays). Thanks for any tips!

PS: I checked that my javascript function works correctly:

<script>
    displayMessages(["One", "Two", "Three"]);
</script>

Answer 1

You need to have a method that outputs a string of the array in javascript array format. The jsp code is run on the server side and then returns html and javascript code in text. Then that code is executed on the client side.

<%!
public static String getArrayString(String[] items){
    String result = "[";
    for(int i = 0; i < items.length; i++) {
        result += """ + items[i] + """;
        if(i < items.length - 1) {
            result += ", ";
        }
    }
    result += "]";

    return result;
}
%>

Of course you can do this with a StringBuffer for better performance, but this shows you the idea.

Then you do something like this

<script>
    displayItems(<% getArrayString(items) %>);
</script>