[jstl] Object형태의 리스트를 view의 javascript에서 사용하기

테스트용 쿼리는 다음과 같다.

테스트용 쿼리

	<select id="sqlCity001001" parameterType="CommonVO" resultType="CamelMap">
		select 'Lithuania' as country
		 , '501.9' as litres
		union all
		select 'Czechia' as country
			 , '11.9' as litres
		union all
		select 'Ireland' as country
			 , '31.9' as litres
		union all
		select 'Germany' as country
			 , '41.9' as litres
		union all
		select 'Australia' as country
		     , '51.9' as litres
		union all
		select 'Austria' as country
			 , '61.9' as litres
		union all
		select 'UK' as country
			 , '71.9' as litres
	</select>

 

컨트롤러에서는 다음의 데이타를 받아서 model에 담아서 view로 넘겨준다.

 

컨트롤러에서 처리

	@RequestMapping(value = "/test.do")
	public String getCityTab1(HttpServletRequest request, HttpServletResponse response, ModelMap model){
		CommonVO vo = new CommonVO(request);
		Map<String, Object> resultMap = new HashMap<String, Object>();
		
		vo.put("rptId", "sqlCity001");
		resultMap = reportService.getCityTab1(vo);
		
		model.addAttribute("resultMap", resultMap);
		return "view";
	}

 

View의 javascript에서 다음과 같이 받아서  사용하도록 한다.

 

view.jsp

<script>


$(document).ready(function(){
// 	console.log("dataLength :" + '${fn:length(arr)}');

	
// 	for(var i = 0 ; i < dataLength; i++){
// 		console.log('${arr[0].litres}');
// 	}

	var dataLength = '${fn:length(arr)}';
	console.log(dataLength);

// 	console.log('${arr[0].litres}');
// 	console.log('${arr[1].litres}');
// 	console.log('${arr[2].litres}');
// 	console.log('${arr[3].litres}');
// 	console.log('${arr[4].litres}');
// 	console.log('${arr[5].litres}');
	

	var countryList = new Array();
	var litresList = new Array();
	<c:forEach items="${arr}" var="item">
		countryList.push("${item['country']}");
		litresList.push("${item['litres']}");
	</c:forEach>
	
	console.log(countryList);
	console.log(litresList);
});
	

</script>

 

다음과 같이 출력되는것을 확인할 수 있다.