가장 흔한 예가 Ajax를 사용할 경우이다. Ajax로 호출을 하고 결과값으로 받은 req.responseText로 JSON을 받았을 경우에는 그냥 Text이기 때문에 Object로 변환해 주어야 한다.
{ id:'Outsider', sex:'male' }
Ajax에서 리턴받을 JSON의 형태가 위와 같이 되어 있을 경우에는
var obj = eval("("+returnValue.responseText+")");
alert(obj.id); // Outsider
위의 코드처럼 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
[ { id:'Outsider', sex:'male' },
{ id:'Zziuni', sex:'male' } ]
JSON이 위의 형태처럼 배열로 되어 있을 경우에는
var obj = eval(returnValue.responseText);
// -> { id:"Outsider", sex:"male" }
그냥 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
다만 이렇게 변환할 경우 eval()은 빠르기는 하지만 단순히 그안의 스트링을 그대로 실행시켜 주는 것이기 때문에 리턴값으로 자바스크립트 명령문이 온다면 그대로 실행시켜버리기 때문에 보안이슈가 발생할 수 있다.
이렇게 리턴받은 소스를 신뢰하기 어려울 때는 JSON.org에서 제공하는 JSON parser을 사용해야 한다. JSON parser는 오직 JSON text만 받아들이고 다른 스크립트는 거부하고 eval()만큼이나 빠르다.
var obj = JSON.parse(returnValue.responseText);
// -> { id:"Outsider", sex:"male" }
JSON.parse()의 목적대로 JSON 텍스트 외에는 거부해야하기 때문에 JSON문법을 정확히 지켜주지 않으면 SyntaxError 예외가 던져진다. 그렇기 때문에 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다.(물론 이 경우는 값들이 스트링이기 때문에 쌍따옴표로 묶어주는 것입니다.) 아래처럼....
{ "id":"outsider", "sex":"male" }
여기서 JSON.parse()를 사용하기 위해서는 Douglas Crockford가 만든 json2.js가 필요하다. json2.js는 더글라스 크록포드가 JSON의 편리한 사용을 위해 만든 JSON API의 새버전이다.(그래서 2가 붙어있다.) 이 API에는 2개의 메서드가 들어있는데 JSON.stringify()와 JSON.parse()이다. JSON.stringify()는 JSON.parse()와는 완전히 반대로 JSON 객체를 주면 JSON 텍스트로 만들어서 준다. 필요할때 갖다 쓰면 된다. (John Resig이 이전버전보다 새버전의 API가 훨씬 좋다고 꼭 이걸 쓰란다.)
좋은 자료 얻어 갑니다.
제 블로그에 참고 해서 간단하게 공부하면서 글을 올렸습니다.
조심히 사용할려고 했는데 문제가 있다면 말씀 부탁드리겠습니다.
그럼 좋은 자료 감사하고 좋은 한주 되세요.
CCL상에서 포스팅되고 있고요. 동일조건은 크게 따지진 않는 편입니다. 가보니 딱히 제포스팅글을 가져갔다는 느낌도 전혀 없으신데요. ^^
도움되셨다니 저도 기분이 좋네요.
블로그 가보니 좋은 정보가 많아서 종종 찾아뵙겠습니다.
반대로 JSON Object를 JSON Text로 변환할 수 있는 방법이 있는지 궁금합니다.
그냥 단순히 +"" 를 이어붙히거나 toString()을 하면 타입을 스트링으로 바꿀 수 있기는 하더군요.
테스트해보았습니다만 원래 String을 준거랑은 좀 다르게 동작을 합니다.
prototype.js를 쓰시면 Object.toJSON(JSON객체) 를 하시면 스트링으로 떨어집니다.
prototype.js 소스를 보니 객체에서 루프돌면서 이름과 값을 꺼내와서 배열로 이어붙힌뒤에 join으로 스트링만들어서 리턴하는군요. 해당부분 소스 참고하시면 될듯 합니다.
아 정말 도움이 됩니다 ㅠ_ㅠ 방금 발견했는데 5년동안 변비하다가 한번에 뚫는 기분 하하하..
그렇게 많이 도움이 되셨다니 저도 좋군요. ^^
글 잘보고 갑니다. 키의 경우는 " " 로 묶어주는 것이 맞지만 값의 경우에는 그 값이 스트링인 경우에만 " " 로 묶어주는 걸로 알고 있습니다. 예제에는 값들이 모두 스트링이라 모두 " " 로 묶어주어야 한다라고 적으셨을거라 생각합니다만...
오래전에 적은 글이라서요.. JSON은 약간 러프하게 쓰기는 하지만 말씀하신 부분이 맞습니다. 수정하도록 하겠습니다. 감사합니다.
퍼갑니다~!!
CCL 지켜주심 감사하구요 ㅎ 어디로 퍼가셨는지 구경하게 알려주심 더 감사하구요 ^^
강사함이다.
안녕하세요. 서버안에 JSON.parse(a); 이라는 구문이 있다면 a가 json형태가 아닐때 SyntaxError를 내면서 서버도 종료됩니다. a가 JSON타입인지 검증하는 함수가 있을까요?
검증하는 함수가 따로 있지는 않고 JSON 문법에 맞게 구성해야 하는데 그것보다는 try-catch로 묶으셔서 예외를 잡아서 처리하시면 도비니다.
JSON 객체를 쓰려는데 각브라우저마다 그냥 쓸 수 있는 내장형 함수인가요? 잘 몰라송...
글에서 설명한 내용은 json2.js라는 파일을 사용한 것입니다.
현재는 JSON이 네이티브 객체로 들어와서 IE8+ 이상이라면 그냥 사용하실 수 있습니다. ( http://caniuse.com/#feat=json )
IE 6,7에서 사용하시려면 json2.js를 임포트하셔야 해요.
굉장히 정리가 잘 되어있는 유용한 글 덕분에 문제를 쉽게 해결했습니다
감사합니다. 자주 들르겠습니다.
네 감사합니다 ^^
개발 과정중 jquery 를 사용하지 않고 순수 자바스크립트로 ajax를 구현해 결과값을 alert()으로 노출해야 했는데..
설명을 너무 좋게 해주셔서 이해가 금방되네요 ㅎㅎ
포스팅 을 하고자 하는데.. 문제가 있을경우에는 내리도록 하겠습니다 ㅜㅜ
출처를 잘 밝혀주셔서 문제될 건 없는것 같습니다. ^^
Json 형식으로 받은 변수를 값을 가져올때, 값이 제대로 안가져와져서 알아보니까, Json 형식이기만했지 String 값이더라구요. 어떻게 바꿀까 고민하던중 이쪽으로 들렸습니다.
덕분에 잘 해결하고 갑니다 감사합니다.
잘 해결하셨다니 다행이네요 ^^
감사합니다. 그런데 JSON2 모듈이 node 서버사이드에서는 안되는가 봐요..
이건 아주 예전 글이라서 그렇고 node에는 현재 JSON이 네이티브로 들어왔으므로 JSON2 없이 그냥 쓰셔도 됩니다.