[java/js] 서버에서 jsonArray보내고 뷰에서 받아서 parse 하기

서버

List<Map<String, Object>> list = codeDao.getCodeDtl();

list의 결과가 아래와 같을 때,

[{id=001, type=T, code=codeA}
,{id=002, type=S, code=codeB}
,{id=003, type=S, code=codeC}]

json배열로 변환시켜서 클라이언트에 넘겨줄것이다.
list > jsonArr > toString > view!

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

@RequestMapping(value="/test")
public String getCodes(HttpServletRequest req, ModelMap model) throws Exception {
 
  
  if(list.size() > 0) {
  		// 데이터를 담을 json array 생성
      JSONArray jArr = new JSONArray();
      for(Map<String, Object> codeDtl : list) {
      		// json object 타입으로 한줄씩 배열에 넣기 
            // {"id":"001","type":"T","code":"codeA"}
          JSONObject jObj = new JSONObject(); 
          jArr.add(jObj);
      }
  }
  String codes = jArr.toJSONString();
  model.addAttribute("codes",codes);
  
  return "test.jsp"
 }

json array

[{"id":"001","type":"T","code":"codeA"}
,{"id":"002","type":"S","code":"codeB"}
,{"id":"003","type":"S","code":"codeC"}]

view

<script>
function parsingJsonArr() {
	// 서버에서 넘어온 값 parse하기 
	var jArr = JSON.parse('${codes}');
    $.each(jArr, function(i,v){
     // 받은 값을 토대로 data-id값과 data-code값이 일치하는 체크박스에 자동으로 체크 
        $(".cbx[data-id="+v.id+"][data-code="+v.code+"]").prop("checked",true);
    }

}
</script>

<input type="checkbox" class="cbx" data-id="01" data-code="a"> box1
<input type="checkbox" class="cbx" data-id="02" data-code="b"> box2
<input type="checkbox" class="cbx" data-id="03" data-code="c"> box3
<button type="button" onclick="cbxToJson()">
저장
</button>
<input type="text" id="str" style="width:500px">

참고
https://www.w3schools.com/js/js_json_parse.asp