JSON Text를 JSON Object로 변환하기

JSON은 써보면 써볼수록 유용한 것 같다. 간결하고 편하고 직관적이다. 어쨌든 JSON Text를 Object로 변환해야 할 때가 있다. 여기서 JSON Text라는 것은 형태는 JSON의 형태이지만 자바스크립트에서 이걸 Object가 아닌 그냥 텍스트로만 인식하고 있다는 것이다. 이걸 Object로 바꾸어야만 그안의 값을 불러다가 사용할 수 있다.

가장 흔한 예가 Ajax를 사용할 경우이다. Ajax로 호출을 하고 결과값으로 받은 req.responseText로 JSON을 받았을 경우에는 그냥 Text이기 때문에 Object로 변환해 주어야 한다.
 
{ id:'Outsider', sex:'male' }

Ajax에서 리턴받을 JSON의 형태가 위와 같이 되어 있을 경우에는
 
JavaScript

var obj = eval("("+returnValue.responseText+")");
alert(obj.id);  // Outsider

위의 코드처럼 eval을 해주면 JSON 오브젝트로 변환할 수 있다.
 
[ { id:'Outsider', sex:'male' },
  { id:'Zziuni', sex:'male' } ]

JSON이 위의 형태처럼 배열로 되어 있을 경우에는
 
JavaScript

var obj = eval(returnValue.responseText);
// -> { id:"Outsider", sex:"male" }

그냥 eval을 해주면 JSON 오브젝트로 변환할 수 있다.

다만 이렇게 변환할 경우 eval()은 빠르기는 하지만 단순히 그안의 스트링을 그대로 실행시켜 주는 것이기 때문에 리턴값으로 자바스크립트 명령문이 온다면 그대로 실행시켜버리기 때문에 보안이슈가 발생할 수 있다. 

이렇게 리턴받은 소스를 신뢰하기 어려울 때는 JSON.org에서 제공하는 JSON parser을 사용해야 한다. JSON parser는 오직 JSON text만 받아들이고 다른 스크립트는 거부하고 eval()만큼이나 빠르다.
 
JavaScript

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가 훨씬 좋다고 꼭 이걸 쓰란다.)

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

[출처] https://blog.outsider.ne.kr/257

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
20 [nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함 file 졸리운_곰 2025.12.12 501
19 [node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동) file 졸리운_곰 2024.03.17 300
18 [node.js 개발] PM2로 Node.js 앱 프로세스 배포하기 file 졸리운_곰 2024.03.16 405
17 [node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기 file 졸리운_곰 2024.03.16 517
16 [node.js 응용] Next.js : Next.js14에 Mysql연결하기 졸리운_곰 2024.03.03 379
15 [node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법 졸리운_곰 2024.02.28 428
14 [node.js 응용] NodeJS 에서 mqtt 사용하기 file 졸리운_곰 2024.02.23 399
13 [node.js 응용] Next.js 기본 개념정리 file 졸리운_곰 2024.02.23 432
12 [node.js 응용] ejs 사용설명서 file 졸리운_곰 2023.11.25 371
11 [node.js 응용] Build a Node.js Proxy Server in Under 10 minutes! file 졸리운_곰 2023.05.07 468
10 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 407
9 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 231
8 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 484
7 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 410
6 [node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기 file 졸리운_곰 2021.10.11 484
5 [node.js][typescript] 5분 안에 보는 TypeScript file 졸리운_곰 2021.07.03 428
4 Getting started with RabbitMQ and Node.js file 졸리운_곰 2019.05.09 466
3 [Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리 file 졸리운_곰 2019.05.09 352
2 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 884
1 Express 앱용 프로세스 관리자 졸리운_곰 2018.10.16 603
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED