【线上代码】js中使用freemarker标签操作list及list嵌套

背景说明：页面中使用freemarker作为模板，现需要将后端返回的数据通过js的方式保存数据。记录之！

后台返回数据

注：图中为后台返回有用数据，主要是红框中的数据在前端要用到。

前端js操作

<script type="text/javascript">
	// 编辑操作，运用freemaker获取区域人员列表
	function peopleListOperation(){
		// 人员数组，存放人员
		var peopleArray = [];
		[#if area??]
			[#if area.peopleList?size > 0]
				// var peopleSize = '${area.peopleList?size}';
				[#list area.peopleList as people]
					// 人员对象，存放人员属性
					var peopleObject = new Object();
					peopleObject.name = '${people.name}';
					peopleObject.sex = '${people.sex}';
					peopleObject.idCard = '${people.idCard}';
					peopleArray.push(peopleObject);
				[/#list]
			[/#if]
		[/#if]
	}
</script>

freemarker list中嵌套list，js中使用

后台返回数据

数据格式：List< String , List<String, String>> --> orgList<name, alarmList<name, id>>，具体格式如上图

HTML中需要的数据格式：

var stationList = [
	{name:'上海', areaList:[{areaname:'黄浦区',code:"3300"},{areaname:'卢湾区',code:"3301"}]},
	{name:'北京',areaList:[{areaname:'东城区',code:"4300"},{areaname:'西城区',code:"4301"}]},
	{name:'天津', areaList:[{areaname:'和平区',code:"5300"},{areaname:'河东区',code:"5301"}]}
];

前端js操作

// 获取二级组织信息
 var stationList = [];
  [#if orgList?size > 0]
      	// 一级组织
      	[#list orgList as firstOrg]
      		var station = new Object();
       		station.name = '${firstOrg.name}';
       		var areaList = [];
       		// 二级组织
      	 	 [#list firstOrg.alarmList as secondOrg]
     				var secondOrg = new Object();
     				secondOrg.code = '${secondOrg.id}';
     				secondOrg.areaname = '${secondOrg.name}';
     				areaList.push(secondOrg);
     				station.areaList = areaList;
			[/#list]
			stationList.push(station);
      	[/#list]
[/#if]

注意事项：

①调试js前，确保后台返回的是你所需要的数据格式！

参考资料：
js 操作freemarker 中的list
js获取freemarker变量的值
感谢 ^ - ^