안녕하세요. 제임스 입니다. 


이전 포스팅에서 JSON.stringify() 에 대해 알아 봤는데요. 이번에는 반대의 역할을 하는 JSON 의 parse() 함수에 대해 알아 보겠습니다. 


JSON.parse() 함수는 JSON 문자열을 javascript 객체로 변환합니다. 


Syntax

 JSON.parse( text[, reviver ] )



Parameters


text

javascript 객체로 변환하고자 하는 JSON 문자열 


reviver (Optional - 선택적)

만약 함수라면, 파싱을 통해 원래 생성 된 값이 반환되기 전에 어떻게 변환 될지를 지정




Examples


1
console.log(JSON.parse('{}'));
cs


실행 결과는 아래와 같습니다. 

{} 



1
2
console.log(JSON.parse('true'));
console.log(JSON.parse('"true"'));
cs


실행 결과는 아래와 같습니다. 

true

true


보기에는 동일해 보이지만 데이타 형이 다릅니다. 

첫번째 값은 boolean 값인 true

두번째 값은 String 값인 "true" 입니다. 


1
2
console.log(JSON.parse('[1, 5, "false"]'));
console.log(JSON.parse('[1, 5, false]'));
cs


실행 결과는 아래와 같습니다. 

[1, 5, "false"]

[1, 5, false]


첫번째 값은 배열에 문자열 false 가 

두번째 값은 배열에 boolean 값 false 가 리턴 되었습니다. 



1
2
console.log(JSON.parse('"string test"'));
console.log(JSON.parse('string test'));
cs


실행 결과는 아래와 같습니다. 

string test

Uncaught SyntaxError: Unexpected token s in JSON at position 0


첫번째는 문자열 string test 를 리턴 했습니다. 

하지만 두번째는 오류가 발생 했습니다. position 0 에 위치한 값이 string test 의 첫번째 문자 s 입니다. 

뭐가 문제일까요? 


문자열을 나타내고자 한다면 " " (double quotation marks) 로 감싸야 합니다. 그런데 " " 없이 string test 라는 문장을 입력 했기 때문에 문자열로 인식하지 못해 오류가 발생 한 것입니다. 

이런 실수 하지 않도록 조심해야 겠죠? ^^




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D












블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



안녕하세요. 제임스 입니다. 


이번에 포스팅할 내용은 JSON 입니다. 참 많이 들어 보고 써보기도 했었지만 막상 사용하고자 하면 기억이 안나고 그렇죠? JSON 에 대해 알기 쉽게 정리 해보겠습니다. 



■ JSON 이란? 


JSON은 JavaScript Object Notation 의 약자로 자바스크립트 객체의 형태를 가지는 문자열을 의미 합니다. 

JSON은 데이터를 저장하거나 주고 받기 위한 구문입니다. 

JSON은 javascript 구문을 사용하고 있으나 JSON 의 포맷은 text 형태를 취하고 있습니다. Text 는 어떤 프로그래밍 언어에서건 데이터 포맷으로 사용되기에 언어 독립적 입니다. 



Client (웹 브라우저) 와 Server 사이에서 데이터를 주고 받을 때, 이 데이터는 text 형태입니다. 

JSON 은 text 형이므로 최소한의 Client 와 Server 사이에서 통신을 위한 데이터 형으로는 적합합니다. 


어떠한 Javascript 객체라도 JSON 으로 변환 가능하며 이를 Sever 로 전송 가능합니다. 

반대로 Sever 로 부터 받은 어떠한 JSON 값도 Javascript 객체로 변환 가능합니다. 



■ Sending Data 


Javascript 객체에 저장된 데이터가 있다면 javascript 객체를 JSON 형으로 변환하여 sever 에 전송할 수 있습니다. 


1
2
3
var jsObj = { "name":"James""occupation":"Developer""city":"Seoul" };
var myJSON = JSON.stringify(jsObj);
window.location = "json_test.jsp?jsonParam=" + myJSON;
cs


jsObj 라는 javascript 객체를 생성하여 JSON 의 stringify() 함수를 이용하여 json_test.jsp 에 jsonParam 이라는 key 값으로 맵핑하여 변환한 JSON 값을 전달하는 코드 입니다. 


2018/05/14 - [javascript] - [ javascript 코딩 ] JSON.stringify() 사용방법 - JSON 가독성 높이기




■ Receiving Data


전송과 달리 JSON 형이 데이터를 받았을 경우 JSON 을 javascript 객체로 변환 할 수 있습니다. 


1
2
3
var jsObj = jsonParam;
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);
cs


Sending Data 샘플 코드에서 jsonParam 이라는 key 값으로 전달 한 값을 받는 형식으로 작성 했습니다. 

jsObj 는 JSON format 이므로 JSON 의 parse() 함수를 이용하여 javascript 객체로 변환 해줍니다. 


2018/05/11 - [javascript] - [ Javascript 코딩 ] JSON.parse() - JSON 문자열을 자바스크립트 객체로 변환하기



위 코드를 실행 하면 결과 값은 아래와 같습니다. 


myObj.name = James



만약 위 코드를 아래와 같이 작성 한다면 어떻게 될까요? 


1
2
3
var jsObj = { "name":"James""age":30"city":"Seoul" };
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);
cs


jsObj 를 JSON 형을 취하고 있는 자바 객체로 제공할 경우 오류가 발생 합니다. 


Uncaught SyntaxError: Unexpected token o in JSON at position 1


이는 jsObj 가 이미 javascript 객체인데 이를 JSON 의 parse 함수를 이용하여 javascript 객체로 변환하려 시도 했기 때문에 발생하는 오류 입니다. 


이런 실수는 안하는 게 좋겠죠? 




JSON 을 설명하기 위해 stringify() 함수와 parse() 함수가 샘플 코드에 등장 했는데요. 

이 함수들은 별도 포스팅으로 정리 하겠습니다. 




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,