JSON 형식으로 DB 저장 후 다시 가져오는 법

JSON 컬럼이 지원되지 않는 경우 JSON형식으로 text를 만들어 DB에 넣어서 사용하면
동적인 데이터를 관리하고 보여주기 편하다.

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 문자열을 자바스크립트 객체로
변환해서 사용하면 된다

추가적으로 홑따옴표 관련 해서 확인 결과 아래와 같았다.

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('')를 사용하는 것을 추천한다