JSON : 데이터를 표현하기 위한 문자 기반의 표준 포맷

데이터를 교환하고 저장하기위한 방식은 여러가지가 있지만, 대표적으로 XML과 JSON이다. 

XML을 HTML과 비슷한 구조로 태그를 이용해서 데이터를 표현한 것이다.

JSON은 태그를 사용하지 않고 XML보다 용량이 작고 데이터를 빠르게 읽고 쓴다는 장점이 있다.

XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다는 차이점이 있다.

 

 

 

JSON

JavaScript Object Notation (자바 스크립트 객체 표기법)

 

Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷으로 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. JSON은 속성-값 쌍으로 이루어져 있다. 

JSON은 Javascript가 아니더라도 다수의 프로그래밍 환경에서 JSON을 읽고 쓸 수 있는 기능이 제공된다.

{"데이터이름" : 값} 으로 데이터를 표현한다.

 

 

 

JSON 표현

 

{ key : value }

데이터 key 값에 값을 저장하는 표현이다.

 

 

{ "name" : "홍길동" }

name이라는 키에 홍길동이라는 문자열 데이터를 저장했다.

 

 

 

{key1 : value, key2 : value2}

데이터 여러개를 연결할 때는 , 를 이용한다.

 

 

{ "name" : "홍길동", "age" : 27 }

숫자 데이터 하나를 추가했다.

 

 

{ key1 : { inKey : inValue }, key2 : [arr1, arr2 arr3] }

다른 객체와, 배열도 값으로 쓸 수 있다. 배열은 [] 으로, 다른 객체는 {}으로 묶는다.

 

 

{ "info" : {"name" : "홍길동", "age" : 27 }, "hobby" : ["수영","요가"]}

{} 안의 객체가 info 데이터에 저장되었고, 취미를 배열으로 저장했다.

 

 

 

 

JSON 데이터 타입

[   1,    "str",    true,    {inKey : "다른 객체"},    ["배열값1", "배열값2"],    null    ] 

JSON에서 허용하는 데이터 타입은 Javascript의 기본 데이터 타입과 같이 문자열, 숫자, 배열, 불리언, 다른객체, null이 있다.

 

문자열(String) : 0개 이상의 유니코드 문자들의 연속. "" 이나 '' 사이에 작성한다.

숫자(Number) : 숫자, 숫자만 입력한다.

객체(Object) : { } 안에 객체의 키, 값을 나열한다.

참/거짓(Boolean) : true / false

배열(Array) : 임의의 종류의 값으로 이루어진 순서가 있는 리스트. []으로 나타낸다. 배열의 요소는 , 으로 구분한다.

null: 빈 값

추가적으로, JSON는 주석을 달 수 없다.

데이터만을 취급하는 JSON에 주석을 달게 되면 주석까지 데이터로 취급되기 때문에 에러가 난다. 

 

 

 

JSON 메서드

1. JSON.stringify() 

객체를 문자열로 반환한다.

 

    <script>
        var json = { "인사": "hello" }
        document.write(json); //[object Object]
        var v = JSON.stringify(json);
        document.write(v); //{"인사":"hello"}
    </script>

JSON을 바로 출력하면 JSON 객체이기 때문에 키와 데이터가 object로 표현된다.

JSON.stringify()으로 해당 json 데이터를 문자열로 반환해서 출력하면 데이터 내용을 확인할 수 있다.

 

 

 

2. JSON.parse()

문자열을 객체로 반환한다.

    <script>
        var str = '{ "인사": "hello" }';
        document.write(str); //{ "인사": "hello" }
        var str_json = JSON.parse(str);
        document.write(str_json); //[object Object]
    </script>

데이터 객체 형식으로 표현된 문자열을 parse로 JSON으로 반환할 수 있다.

JSON으로 반환한 것을 str_json변수에 저장하여 출력 확인했을 때 데이터이기 때문에 object로 표현된 것을 확인하였다.

 

 

 

 

JSON 데이터 추가

var people = [{ '이름' : '홍길동', '나이' : 27},{ '이름' : '김철수', '나이' : 20 }];

이름과 나이를 저장한 두 데이터를 배열로 people에 저장했다.

 

 

var person = { "이름" : "김영희" , "나이" : "30" };

이름, 나이 데이터를 가진 새로운 JSON을 만들어 person 변수에 저장했다.

이것을 위에 people 변수에 저장된 JSON에 추가하고 싶으면 push를 이용할 수 있다.

 

people.push(person);

people에 person을 추가했다. person 데이터가 people 배열에 추가된다.

 

 

    <script>
        $(function () {
            alert('제이쿼리 로드 완료')
        });
        var people = [{ '이름' : '홍길동', '나이' : 27},{ '이름' : '김철수', '나이' : 20 }];
        var person = { "이름" : "김영희" , "나이" : "30" };
        document.write(JSON.stringify(people)); //[{"이름":"홍길동","나이":27},{"이름":"김철수","나이":20}]
        people.push(person);
        document.write(JSON.stringify(people)); //[{"이름":"홍길동","나이":27},{"이름":"김철수","나이":20},{"이름":"김영희","나이":"30"}]
    </script>

push하기 전과 push한 것을 확인할 수 있다.