在 FreeMarker 中用 js 获取 后台的值

开发中 有时候需要获取到 freemark 的数据

比如后台放入的数据为

	List<HashMap<String, Object>> list = new ArrayList<>();

	HashMap<String, Object> map1 = new HashMap<>();
	map1.put("id",1);
	map1.put("name","张三");
	map1.put("age",18);
	list.add(map1);

	HashMap<String, Object> map2 = new HashMap<>();
	map2.put("id",2);
	map2.put("name","李四");
	map2.put("age",19);
	list.add(map2);

	HashMap<String, Object> map3 = new HashMap<>();
	map3.put("id",1);
	map3.put("name","王五");
	map3.put("age",20);
	list.add(map3);

我们一般 ftl 页面解析如下

	<#if list?? && (list?size > 0)>
	<#list list as item>
	<span>item.id</span>
	<span>item.name</span>
	<span>item.age</span>
	</#list>
	</#if>

但是有时候，我们想在页面直接获取到这个 list，可以通过 js 的方式获取到，存在变量中，然后可以放到页面隐藏的元素中，以便后续使用

<script>
	var  listData = []
	var itemData = {}
	<#if list??>
	<#list list as item>
		itemData.id = '${item.id}'
		itemData.name = '${item.name}'
		itemData.age = '${item.age}'
		itemData.date = '${item.date?string('yyyy-MM-dd')}'
		listData.push(item);
	</#list>
	</#if>
</script>

也可以在后台 把对象转成 jsonstring

js 中直接当初字符串接收，然后转成 json 对象使用

// 对象转 jsonstring
 String jsonStr =  JSONObject.toJSONString(obj)
Map<String, Object> map = new HashMap(16);
// freemark 后台put
map.put("d1",jsonStr)

//js中处理
var dataStr = ${'d1'}
//然后可将dataStr转成 JSONobj
var obj = eval('(' + dataStr + ')');
或者
 var obj = JSON.parse(dataStr ); 
或者
 var obj = dataStr .parseJSON(); 

注意点

有时候模板报错

"freemarker.core.NonStringException: For \"${...}\" content: Expected a string or something automatically convertible to string (number, date or boolean), but this has evaluated to a sequence (wrapper: f.t.SimpleSequence)

Freemarker 会将通过 key 获取的 value 默认转为 string ，所以这里有上面你的两种处理方式

1. 在模板中遍历
2. 如果是在 js 中得话 ，后台可将对象转成 JSONSring,然后再 js 中处理