Populating JavaScript Array from JSP List

Question

Ok so perhaps someone can help me with a problem I'm trying to solve. Essentially I have a JSP page which gets a list of Country objects (from the method referenceData() from a Spring Portlet SimpleFormController, not entirely relevant but just mentioning in case it is). Each Country object has a Set of province objects and each province and country have a name field:

public class Country  {
    private String name;
    private Set<Province> provinces;

    //Getters and setters
}

public class Province {
    private String name;

    //Getters and setters
}

Now I have two drop down menus in my JSP for countries and provinces and I want to filter the provinces by country. I've been following this tutorial/guide to make a chain select in JavaScript.

Now I need a dynamic way to create the JavaScript array from my content. And before anyone mentions AJAX this is out of the question since our project uses portlets and we'd like to stay away from using frameworks like DWR or creating a servlet. Here is the JavaScript/JSP I have so far but it is not populating the Array with anything:

var countries = new Array();
<c:forEach items="${countryList}" var="country" varStatus="status">
    countries[status.index] = new Array();
    countries[status.index]['country'] = ${country.name};
    countries[status.index]['provinces'] =
    [
        <c:forEach items="${country.provinces}" var="province" varStatus="provinceStatus">
            '${province.name}'
            <c:if test="${!provinceStatus.last}">
              ,
            </c:if>
        </c:forEach>
    ];
</c:forEach>

Does anyone know how to create an JavaScript array in JSP in the case above or what the 'best-practice' would be considered in this case? Thanks in advance!

Answer 1

Have you considered using JSON? There are several libraries out there that can take a generic collection and output JSON for Java and other languages.

Answer 2

var countries = new Array();
<c:forEach items="${countryList}" var="country" varStatus="status"> 
    countryDetails = new Object();
    countryDetails.country = ${country.name}; 
    var provinces = new Array();

        <c:forEach items="${country.provinces}" var="province" varStatus="provinceStatus"> 
           provinces.push(${province.name});
        </c:forEach> 
    countryDetails.provinces = provinces;
    countries.push(countryDetails);
</c:forEach> 

now what you have is something like this in javascript

var countries = [
  {country:"USA",
  provinces: [
    "Ohio",
    "New York",
    "California"
  ]},
  {country:"Canada",
  provinces: [
    "Ontario",
    "Northern Territory",
    "Sascetchewan"
  ]},
]

The other option would be to make your output look like the javascript I posted.

var countries = [
<c:forEach items="${countryList}" var="country" varStatus="status">  
    {country: '${country.name}',
    provinces : [ 
        <c:forEach items="${country.provinces}" var="province" varStatus="provinceStatus">  
           '${province.name}'
           <c:if test="${!provinceStatus.last}">    
             ,    
           </c:if>   
        </c:forEach>  
    ]}
    <c:if test="${!status.last}">    
      ,    
    </c:if>  
    </c:forEach>  
];

Answer 3

The primary problem in your code is that you forgot to put "status.index" inside ${ }.

countries[${status.index}] = new Array();

Now, that said, that would be a pretty bad way to do things because you'd end up with a lot of Javascript code in your page. Much much better to create the list using Javascript object notation as in the second of @John Hartsock's answers.