동적인 데이터를 관리하고 보여주기 편하다.
ex)
var params = { var1: $('#var1').val(), var2: $('#var2').val(), var3: $('#var3').val(), var4: $('#var4').val() } $('#varTotal').val(JSON.stringify(params));
varTotal를 console로 찍어보면 아래와 같이
JSON.stringify 함수로 JavaScript params값을 JSON(JavaScript Object Notation) 문자열로 변환합니다.
{"var1":"aaaa","var2":"bbbbb","var3":"ccccc","var4":"ddd"}
이 형태를 DB 저장 후 다시 JQUERY로 가져 올 경우
DB에서 데이터를 varVO 클래스에 담아 varTotal 컬럼으로 가져온다 가정할때
model.addAttribute("varVO", varVO);
var varVO= ${varVO.varTotal}; console.log("varVO : %o",varVO); console.log("varVO : " +titleVO.var1); console.log("varVO : " +titleVO.var2); console.log("varVO : " +titleVO.var3);
이와 같이 사용하면된다
만약에 ajax를 사용해서 json type으로 데이터를 받아 왔을 경우나
위에서 데이터를 홑따옴표묶었을 경우 문자열로 인식을 하기 때문에 var varVO= '${varVO.varTotal}'
JSON.parse(varVO.varTotal) 를 사용해서 JSON 문자열을 자바스크립트 객체로
변환해서 사용하면 된다
위에서 데이터를 홑따옴표묶었을 경우 문자열로 인식을 하기 때문에 var varVO= '${varVO.varTotal}'
JSON.parse(varVO.varTotal) 를 사용해서 JSON 문자열을 자바스크립트 객체로
변환해서 사용하면 된다
추가적으로 홑따옴표 관련 해서 확인 결과 아래와 같았다.
console.log("titleVO : %o",'${testVO.titleDetail}');
titleVO : "{"titleMedia1":"tvn","titleMedia2":"bbbbb","titleMedia3":"ccccc","titleMedia4":"MBC"}"
console.log("titleVO : " +'${testVO.titleDetail}');
titleVO : {"titleMedia1":"tvn","titleMedia2":"bbbbb","titleMedia3":"ccccc","titleMedia4":"MBC"}
문자열을 %O 로 보여줄 경우 기존 문자열를 쌍따옴표로 감싸면서 로그가 찍히며
또 자바스크립트는
${testVO.titleDetail} 를 홑따옴표로 감쌌을 경우 문자열로 인식하고 감싸지 않을 경우 오브젝트로 인식한다
그러므로 JSON.parse를 사용 할때는 ${testVO.titleDetail} 를 꼭 홑따옴표로 감싸줘야한다
이유는 JSON.parse 함수는 문자열을 자바스크립트 객체로 변경해 주는 것이기 때문이다.
결론적으로
JSON 형식으로 저장된 DB TEXT를 스크립트로 가져와서 JSON과 같은 형태로 사용할 경우
var titleVO= ${testVO.titleDetail}; //자바스크립트 객체
var titleVO= JSON.parse('${testVO.titleDetail}'); //문자열을 자바스크립트 객체로 변환
홑따옴표를 안붙이고 model로 넘어온 자바 변수를 사용해도 되지만 명시적으로 보이기 해 JSON.parer('')를 사용하는 것을 추천한다
