JSON(JavaScript Object Notation)
JSON은 자바스크립트의 객체를 표현하는 방식으로, key-value 쌍으로 이루어진 데이터를 전달하기 위한 개방형 표준 포맷이다.
JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다.
JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다.
JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다.
이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.
이라고 설명하고 있다. 말인즉슨 언어에 구속되지 않고 자료를 쉽게 주고받을 수 있는 포맷이라는 말.
JSON 데이터타입에는
-문자열(string)
-숫자(number)
-boolean(true/false)
-Json object
-array
-null
이 존재하며 이 중 문자열 / 숫자/ boolean 타입 등은 다른 언어들과 크게 다르지 않아 소개를 생략한다.
문자열에 char형식이 없고 한 글자도 string으로 취급된다는 점만 기억하면 될 것 같다.
JSON Object(객체)는 비순서화된 SET으로 이루어져 있다.
이를 표현하는 방식은 중괄호 { }로 시작하고 끝내며, 이 중괄호 안에 name과 value를 콜론(:)으로 묶어 하나의 쌍을 만든다.
각각의 쌍은 comma(,)로 구분한다. 파이썬의 Dictionary와 거의 흡사한 구조이며 다루는 방식도 그렇다.
{"name":"홍길동", "age":12}
JSON Array(배열)
JSON의 배열은 기존 배열과 유사하게
var array = [
{"name":"홍길동", "age":12},
{"name":"수지", "age":22},
{"name":"김병만", "age":32},
{"name":"차현수", "age":42}
];
와 같이 이루어진다. 안에 각각 JSON 객체가 담긴 모습이다.
JSON의 함수
가장 많이 쓰이는 형변환함수 JSON.parse()와 JSON.stringify()를 소개해본다.
-JSON.parse()
JSON형태의 String을 객체형 object로 변경하는 메소드다.
데이터통신시 쿼리스트링 등 교환을 위해서는 문자형으로 변환이 필요하고, 이 주고받은 걸 다루기 위해서 다시 객체형으로 바꾸어 쓸 때 사용한다.
var jsonStr = '{"name":"hse","age":12,"weight":68.5,"bool":false,"inNull":null}';
var jsonObj = JSON.parse(jsonStr);
JSON 객체로 변경한 jsonStr에서 .key를 이용하여 value를 꺼낼 수 있다.
document.write(jsonObj.name+"<br>");
document.write(jsonObj.age+"<br>");
document.write(jsonObj.weight+"<br>");
document.write(jsonObj.bool+"<br>");
document.write(jsonObj.inNull+"<br>");
파이썬처럼 ['key']를 이용해도 같은 결과가 나온다.
document.write(jsonObj['name']+"<br>");
document.write(jsonObj['age']+"<br>");
document.write(jsonObj['weight']+"<br>");
document.write(jsonObj['bool']+"<br>");
document.write(jsonObj['inNull']+"<br>");
결과:
이중의 구조도 가능하다. value값에 JSON 객체타입이 다시 들어있는 형태다. 3중 4중의 형태도 역시 가능하다.
여기서 key "info"의 value인 {"name":"hse","age":22} 에서, "name"인 hse, "age"인 22를 꺼내보자.
var jsonStr = '{"info":{"name":"hse","age":22},"tel":"0105121321"}';
현재 작은따옴표('')로 묶인 String타입이기 때문에 JSON.parse()를 이용해 json 객체타입으로 변경해준다.
var temp = JSON.parse(jsonStr);
document.write(temp.info.name);
document.write(temp['info']['age']);
바뀐 객체타입 temp에서 {"name":"hse","age":22} 에 접근하기 위해 key값인 .info 혹은 ['info']를 쓰고, 다시 이름과 나이의 value를 가져오기 위해 각각 name과 age를 또 붙여준 것이다.
결과:
다음 예제를 위해 value에 JSON 배열 형태가 담긴 String타입 jsonStr을 선언했다.
var jsonStr='{"pokemon":[{"name":"꼬부기","height":130},{"name":"파이리","height":90}]}';
여기서 key값인 "pokemon"
jsonObj.pokemon
를 선택하면 value값인 [{"name":"꼬부기","height":130},{"name":"파이리","height":90}]
가 선택되기를 기대하겠지만 이는 배열에 담긴 JSON 객체이기 때문에 출력하면 [object Object] 같은 값이 나오게 된다.
이 포켓몬 전체를 한 번 빼내본다.
반복문을 도는 방식은 일반 자바코드와 유사하다.
[{"name":"꼬부기","height":130},{"name":"파이리","height":90}]
부분을 돌며 빼내야하기 때문에 아까 [object Object]부분을 빼냈던 jsonObj.pokemon의 length를 뽑아내면 될 것 같다.
var jsonObj = JSON.parse(jsonStr);
for(var i = 0 ; i <jsonObj['pokemon'].length; i++){
document.write(jsonObj['pokemon'][i].name + " / " + jsonObj['pokemon'][i].height+"<br>");
}
익숙해지기 위해 ['key']와 .key를 섞어 써봤다.
결과:
-JSON.stringify()
반대로 JSON Object형을 String타입으로 변경하는 메소드다.
JSON 객체타입 jsonObj를 선언하고 출력해본다.
var jsonObj = {"name":"hse","age":22,"bool":false};
document.write(jsonObj);
이를 JSON.stringify()로 String 타입으로 변경하면 잘 출력되는 모습을 볼 수 있다.
var jsonObj = {"name":"hse","age":22,"bool":false};
var jsonStr = JSON.stringify(jsonObj);
document.write(jsonStr)
