jQuery and Java List example

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

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

Spring controller
	@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.

somepage.jsp
    <%@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().

html page
<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 , ”

html page (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>

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;
html page
<script>
	$(document).ready(function() {
		var list = ${list};
		$.each(list, function( index, value ) {
			alert( index + ": " + value );
		});
	});
</script>

Review html source code :

html page (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.

Note
To loop over a object array in JSON formatted string, you need to converts it to JavaScript object (with JSON.parse() or $.parseJSON()) before parse it with jQuery $.each(). See this example – JQuery Loop Over JSON String

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.

上一篇: Eclipse java.lang.OutOfMemoryError: Java heap space
下一篇: Java find location using Ip Address
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号