본문 바로가기
프로그래밍/JavaScript

javascript JSON 파싱 방법 ( JSON.parse, eval )

by 원피스랜드 2020. 12. 24.
반응형

javascript JSON 파싱 방법에  3가지에 대해 정리한다.

 

1) eval 함수 사용

 

 <script type="text/javascript">

 

        // JSON 표기법

 var jsonStr = "{no:1, name:'용남짱'}";

 eval("var Obj = ("+ jsonStr +")" );

 

 document.write(Obj.no + ', ');

 document.write(Obj.name);

 

</script>

결과 : 1, 용남짱

 

2) JSON.parse 함수 사용

 

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


자세히  jsonStr을 보면 위 eval에서 사용한 json은 json 형식에 위배 된다.  " 가 안들어갔음

 

 

 <script type="text/javascript">

 

 var jsonStr = '{"no":1, "name":"용남짱"}';

 //eval("var obj = ("+ jsonStr +")" );

 

 var obj = JSON.parse(jsonStr);

 

 document.write(obj.no + ', ');

 document.write(obj.name);

 

 

</script>

 

 

// 결과 : 1, 용남짱

 

최신브라우저는 javascript 엔진이 JSON을 객체로 채택한듯 하다. 

JSON 의 현재 최신브라우저에서는 정상적으로 동작하나 예전 구형 브라우저에서는  JSON 객체를 못찾을수 있다.



그러한 문제를 해결하기 위해서는 JSON.parse() 사용하기 위해서는 

 

json2.js 가 필요하다. 

 

더글라스 크록포드가 JSON의 편리한 사용을 위해 만든 JSON API의 새버전이다.

(그래서 2가 붙어있다.) 

 

- www.json.org 접속

- 하단 메뉴중 JavaScript - json2.js 클릭

json2,.js 파일을 

<script type="text/javascript" src="json2.js"></script>  해줘야 한다.

 

 

3) JSON.stringify 함수 사용  ( json 객체 - > json String )

 

JSON 또는 배열의 객체를 String 으로 바꿔 사용할때 사용한다.

 

 

var obj = {

  name: 'myObj'

};



JSON.stringify(obj);



결과

{"name":"myObj"}
반응형

댓글