JSON 사용하기

JSON 사용하기

JSON 사용하기

JSON은 Key:Value 형식으로 이루어진 데이터 교환 포멧이고, 연속된 데이터는 ,로 표기합니다.

먼저 Json이 Key:Value형식으로 이루어졌다는 것을 알기 위해 하나의 Function을 예재로 하였습니다.

JSON의 Key:Value 이해하기

아래 함수에는 Json Object와 Array가 있고 동일한 데이터를 저장하고 있습니다.

Json Object와 Array에의 차이는 데이터의 Index의 차이가 있다고 할 수 있습니다.

Array에서의 Index는 배열의 순서이고, Json Object의 Index는 바로 Key가 될 수 있습니다.

1. function jsontest() {
2.     //json은 키 밸류 값으로 접근이 가능합니다.
3.     var arr = [ "ktko", 29, "Programmer", "Computer Game"];
4.     var ktko = {
5.             "name" : "ktko",
6.             "age"  : "29",
7.             "job"  : "Programmer",
8.             "hobby": "Computer Game"
9.     }
10.    
11.     document.write("==========Array========== <br/>");
12.     for(var index in arr) {
13.         document.write("index : " + index + ", value : " + arr[index] + "<br/>");
14.     }
15.    
16.     document.write("==========Json Object========== <br/>");
17.     for(var data in ktko) {
18.         document.write("index : " + data + ", value : " + ktko[data] + "<br>");
19.     }
20. }

결과는 아래와 같습니다.

JSON의 복수 데이터 이해하기

family라는 배열안에 4개의 객체가 있고, 배열의 순서를 Index로 하여 값을 가져오고 있습니다.

또한 jquery의 each함수를 통해 값을 가져올 수 있습니다.

1. function jsontest2() {
2.     var obj = {
3.             "family" : [ {
4.                 "NAME" : "ktko",
5.                 "AGE"  : "29",
6.                 "JOB"  : "Programmer",
7.                 "HOBBY": "Computer Game"
8.             }, {
9.                 "NAME" : "yrkim",
10.                 "AGE"  : "57",
11.                 "JOB"  : "QUEEN",
12.                 "HOBBY": "Cooking"
13.             }, {
14.                 "NAME" : "wsko",
15.                 "AGE"  : "60",
16.                 "JOB"  : "KING",
17.                 "HOBBY": "Soccer"
18.             }, {
19.                 "NAME" : "kwko",
20.                 "AGE"  : "31",
21.                 "JOB"  : "DA",
22.                 "HOBBY": "Computer Game"
23.             } ]    
24.         }
25.        
26.         document.write(obj.family[0].NAME + "<br/>");
27.         document.write(obj.family[1].NAME + "<br/>");
28.         document.write(obj.family[2].NAME + "<br/>");
29.         document.write(obj.family[3].NAME + "<br/>");
30.        
31.         document.write("==========$.each========== <br/>");
32.         $(obj.family).each(function(index, family) {
33.             document.write("index : " + index + ", family name : " + family.NAME + "<br/>");
34.         });
35. }

결과는 아래와 같습니다.

JSON의 두 가지 Method

JSON에는 자주 사용되는 Method가 있는데 JSON.parse(str)와 JSON.stringify(obj) 가 있습니다.

JSON.parse는 JSON 포맷의 문자열을 객체로 변환 시켜주고, 

JSON.stringify는 객체를 JSON 포맷의 문자열로 변환 시킵니다.

아래 예제는 JSON 포맷에 맞춘 문자열을 JSON.parse()를 이용하여 객체화 시키고 또 객체화한 객체를 JSON.stringify()를 이용하여 문자열로 변환하는 예제입니다.

 console.log와 document.write를 보시면 문자열을 객체화시켰을 때 document.write에 object라고 나오는 것을 확인할 수 있습니다.

JSON.parse를 이용하여 문자열을 객체화시켰기 때문입니다. 나머지는 문자열이기 때문에 아래 사진과 같이 나오고 있습니다.

1. function jsonConvert() {
2.     var ktko = '{ "NAME" : "KTKO", "AGE" : 29, "JOB" : "Programmer", "HOBBY" : "LOL" }';
3.     console.log(ktko);
4.     document.write(ktko + "<br/>");
5.    
6.     //String을  Json객체로 변환
7.     var jsonktko = JSON.parse(ktko);
8.     console.log(jsonktko);
9.     document.write(jsonktko + "<br/>");
10.    
11.     //Json객체를 다시 String 변환
12.     var strktko = JSON.stringify(jsonktko);
13.     console.log(strktko);
14.     document.write(strktko + "<br/>");
15. }

결과는 아래와 같습니다.

tip

아래 사이트는 Json Data가 문법에 맞게 제대로 검증되었는지, 또는 Json 데이터를 이쁘게 볼 수 있게 정렬을 깔끔하게 해주는 사이트입니다.

https://jsonlint.com/ json 검증 사이트

http://json.parser.online.fr/ json 검증해주는 사이트

http://jsoneditoronline.org/