java后台的ArrayList在前台js中转为array

使用场景：Java Web后台将String数组传到前台后，前台在js需要转成数组，实现遍历。

下面介绍的方法是后台数组，放到model中，前台js解析成Array。其实也可以用ajax请求后台处理后返回json串，这样更好解析，对于复杂的对象数组，估计只能用ajax请求了，js解析比较复杂了。

项目是SpringBoot框架，使用了themeleaf模板。后经过测试了SpringMVC下使用themeleaf正确。Spring MVC下使用jsp测试不能用，js中取不到数据，jsp中的使用方法见备注。

使用的是google的JsonArray

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.2</version>
</dependency>
           

后台定义数组定义：JsonArray userList= new JsonArray();

后台传值：model.addAttribute("userList",userList);

前台接受使用隐藏域，这里用的themeleaf模板。<input type="hidden" name="userList" id="userList" th:value="${userList}"/>

js获取并转换为数组：

var userList = $("#userList").val();

console.log(userList);

var myobj = eval("("+userList+")");

myobj就是js数组了。

之后遍历即可。

备注：springMVC下，使用jsp，后台一样。前台页面使用隐藏域传递，<input type="hidden" name="userList" id="userList" value="${userList}"/>

js中使用var userList = "${userList }"; js报错。

使用var userList = $("#userList").val();

只有左括号。

后台经测试springMVC下，前台jsp页面，js获取后台数组方法如下。

后台传递使用ArrayList：

ArrayList<String> arr = new ArrayList<>();
    	arr.add("122222");
    	arr.add("233333");
    	model.addAttribute("arr", arr);
           

前台隐藏域和直接取值都可以，

转成数组：var arr2 = arr.substring(1,arr.length-1).split(",");

因为后台传递过来的数组，在上面两种方法取回后都成了带中括号的字符串[1,3,5]，所以上面去掉中括号后逗号分隔得到数组。

小结：为了实现上面的功能，也用了几个小时的时间，绕了些弯路，记录以备后面少走弯路。

感谢DuanQingCI的提醒，我又重新调试了代码，修改了错误的地方，写明了使用本方法的前提和条件。如果有不对的地方希望多多指正。