[JQuery] JSON의 정의와 활용

본격적으로 JSON에 대해서 알아보겠습니다.

비트박스에 북치기와 박치기만 있으면 된다면, JSON에서는 []와 {}만 알고 계시면 되겠습니다.

네, 눈치가 있으신분이라면, (1)편에서 말씀드린 색인배열과 연관배열을 떠올리시겠네요. ^^

먼저 용법을 한번 보겠습니다.

	[10, 20, 30, '가나다',40]

 

네, 위 JSON식은 []로 엮여 있기 때문에, 색인배열이 되겠습니다.

실제 스크립트에서 사용방법은

 

	<script type='text/javascript'> var array = eval([10, 20, 30, '가나다',40]);  alert(array[3]);  </script>

 

JSON 의 기본 사용방법에 대해서 설명을 드리지 않고 예제가 나와 당황스러우실 것 같네요.

JSON는 문자열 형식으로 나타내도록 되어있습니다. (script에서 데이터 전송을 목적으로 하다보니, 어쩌면 당연할수도 있겠네요 ^^)

[10, 20, 30, '가나다',40] 이 부분이 JSON이 되겠구요. javascript에서는 eval 함수를 통해서 JSON을 해석한 객체를 생성해 줍니다.

 

alert창의 array[3] 용법을 통해 4번째 인수를 메시지창으로 보여주는 소스입니다.

 

색인배열을 보셨으니, 연관배열을 보셔야겠습니다. ^^

	<script type='text/javascript'> var array = eval({"KOR": 10, "ENG":20, "MATH": 30}); alert(array['KOR']); alert(array.KOR); </script>

 색인배열은 HashTable 처럼 키와 값이 쌍을 이루는 구조로 되어 있기 때문에, 키:값을 쌍으로 정의해주게 됩니다.

array 에는 KOR, END, MATH 의 배열키를 가지고 각각의 값을 저장하고 있습니다.

접근은 색인배열처럼 Index로 접근하는 것이 아니라, 키값을 가지고 접근하게 됩니다.

 

array['KOR'] 과 array.KOR 으로 두 번 호출하였는데요. Javascript는 자체 객체관리구조를 색인배열의 형태를 이용하고 있습니다.

그래서 [‘KOR’]로 하거나 .KOR로 하거나 동일한 접근으로 인식해서 사용할 수 있습니다. ( (1)에서 말씀드렸네요 ^^)

 

 자. 이제 JSON을 마스터 하셨습니다. (응??)

 

응용으로 좀 섞어서 써볼까요

	<script type='text/javascript'> var array = eval( [ { "NAME" : "김선기", "NUM" : 23, "SCORE" : {"KOR": 10, "ENG":20, "MATH": 30}, "HIS" : [2,4,5] }, { "NAME" : "박동휘", "NUM" : 24, "SCORE" : {"KOR": 30, "ENG":40, "MATH": 50}, "HIS" : [7,3,7] }, { "NAME" : "박종훈", "NUM" : 25, "SCORE" : {"KOR": 1, "ENG":2, "MATH": 1}, "HIS" : [9,9,9] }, ] );   alert(array[1].NAME); alert(array[1].SCORE.KOR); alert(array[1]['HIS'][1]);   </script>

 

보기 편하게 좀 들여쓰기를  해 보았습니다.

Array 의 색인배열에는 각각 학생의 데이터를 관리하는 연관배열이 들어있고,

학생의 데이터의 연관배열에는 이름, 번호, 점수를 가지고 있는 연관배열을 가지고 있고, 과거석차(?)를 의미하는 HIS 색인배열을 가지고 있습니다.

array[1].NAME 는 2번째 학생의 이름을 가져온 것이고,

array[1].SCORE.KOR 는 2번째 학생의 점수 연관배열에서 국어점수를 가져온 것이고,

array[1]['HIS'][1] 는 2번째 학생의 과거석차 기록 색인배열에서 2번째 값을 가져온 것입니다.

쉽게 이해 되시죠?

 

 

이제 정말 JSON을 마스터 하셨습니다.

JSON은 비동기로 데이터를 주고 받을 때, 사용하면 특히 편리합니다.

웹서비스로 데이터를 요청하여 받아올 때, 그것을 클라이언트에서 뿌려줄 때. 특히 편리합니다.

데이터를 보내주는 쪽에서도 몇 개의 반복문만 사용하면 쉽게 만들 수 있구요. ^^

XML로 주고 받을 수 도 있지만, 스크립트 언어에서 사용하긴 매우 귀찮을 수 있죠. ^^

 

이상으로 매우 허접한 JSON강좌를 마치겠습니다.


[출처] http://dogsound.kr/
[원본] http://dogsound.kr/70096404278
[저작자] 스프링전