jQuery and Java List example

There is no direct way to iterate over a Java List with jQuery, see the following case study :

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView getPages() {
		List<String> list = new ArrayList<String>();
		list.add("List A");
		list.add("List B");
		list.add("List C");
		list.add("List D");
		list.add("List E");
		ModelAndView model = new ModelAndView("somepage");
		model.addObject("list", list);
		return model;

JSP page, you can access the list object via ${List}, and iterate over it via JSTL.

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <c:forEach var="listValue" items="${list}">
	<li>${listValue}</li>
    </c:forEach>

What if I want to pass the List object to jQuery directly?

Problem : There are no double quotes in Java List

Example to iterate over a Java List with jQuery $.each().

<script>
	$(document).ready(function() {
		var list = ${list};
		$.each(list, function( index, value ) {
			alert( index + ": " + value );
		});
	});
</script>

Above jQuert script will not be executed “Uncaught SyntaxError: Unexpected token , ”

<script>
        $(document).ready(function() {
	    var list = [List A, List B, List C, List D, List E];
	    $.each(list, function( index, value ) {
		alert( index + ": " + value );
	    });
        });
</script>

Review above html source code, Java List didn’t enclose the List’s values with double quotes ", so, jQuery unable to process it.

Solution : Convert Java List to JSON

The solution is converts the Java List into JSON format before pass it to jQuery. In Spring controller, use Jackson (or other JSON processors)to convert the List into JSON format.

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView getPages() {
		ObjectMapper mapper = new ObjectMapper();
		List<String> list = new ArrayList<String>();
		list.add("List A");
		list.add("List B");
		list.add("List C");
		list.add("List D");
		list.add("List E");
		ModelAndView model = new ModelAndView("somepage");
		String json = "";
		try {
			json = mapper.writeValueAsString(list);
		} catch (Exception e) {
			e.printStackTrace();
		model.addObject("list", json);
		return model;

<script>
	$(document).ready(function() {
		var list = ${list};
		$.each(list, function( index, value ) {
			alert( index + ": " + value );
		});
	});
</script>

Review html source code :

<script>
        $(document).ready(function() {
	    var list = ["List A","List B","List C","List D","List E"];
	    $.each(list, function( index, value ) {
		alert( index + ": " + value );
	    });
        });
</script>

Done.

References

1. JQuery Loop Over JSON String – $.Each Example
2. jQuery $each() example
3. Spring MVC and List example
4. Wikipedia : JSON
5. Jackson – High-performance JSON processor.