[jQuery] JSON 사용하기

JSON 표기법

---

Javascript와 JQuery에서 JSON 표기법은 같다!

Javascript(jQuery)에서 사용되는 자료의 나열 방법으로 이름(key)와 값(value)의 쌍^[각주:1]으로 구성된다.

이름(key)에는 따옴표 사용이 자유롭다.

단, 이름에 "-"가 있는 경우 따옴표 필수!

ex) background-color (x), "background-color" (o)

기본 정의 방법

var my_height = 175.6;
var json = {
    name: 'JS학생',     // 문자열은 따옴표 사용
    age : 20,           // 숫자형이나 boolean은 따옴표 x
    height: my_height   // 다른 변수를 값으로 사용도 가능함
};
 
// 값에 접근하기.
console.log(json.name);
console.log(json.age);
console.log(json.height);

배열데이터를 포함하는 경우

var lecture = {
    start: '2017-09-06',
    end: '2018-01-31',
    subject: ['html', 'css', 'javascript', 'php']
};
 
// 값에 접근하기
console.log(lecture.subject[0]);
 
// 반복문으로 값에 접근하기
for (var i = 0; i < lecture.subject.length; i++) {
    console.log(lecture.subject[i]);
}

JSON끼리의 중첩

다른 JSON을 포함할 수 있다.

var address = {
    postcode : '12345',
    header : '서울시 강남구 역삼동',
    footer : '123-45'
}
 
var member = {
    user_id : 'student',
    user_name : '학생',
    addr : address
};
 
//값의 접근
console.log(member.addr.postcode);

축약표현!

var member = {
    user_id : 'student',
    user_name : '학생',
    addr : {
        postcode : '12345',
        header : '서울시 강남구 역삼동',
        footer : '123-45'
    }
};

JSON이 배열에 들어가는 경우

var book1 = { "name": "레미제라블", "writer": "빅토르 위고" };
var book2 = { "name": "홍길동전", "writer": "허균" };
var book3 = { "name": "사람은 무엇으로 사는가?", "writer": "톨스토이" };
 
var books = [book1, book2, book3];

축약표현!

var books = [
    { "name": "레미제라블", "writer": "빅토르 위고" }, 
    { "name": "홍길동전", "writer": "허균" }, 
    { "name": "사람은 무엇으로 사는가?", "writer": "톨스토이" }
];

JSON을 포함하는 배열이 다른 JSON

var library = {
    name: "강남도서관",
    address: ' 서울시 강남구 ...',
    open: '오전 9시 00분',
    close: '오후 6시 00분',
    book_list: [
        { "name": "레미제라블", "writer": "빅토르 위고" },
        { "name": "홍길동전", "writer": "허균" },
        { "name": "사람은 무엇으로 사는가?", "writer": "톨스토이" }
    ]
};

JSON에 포함된 함수

Javascirpt(jQuery)에서는 변수에 함수를 참조시킬수 있다.

var hello = function(){
    ...
};

JSON은 key와 value의 쌍으로 이루어진 데이터 집합 ( value = 변수, 값)

즉, value에 function이 참조될 수 있다.

var data = {
    foo: 123,
    bar: function() {
        ...
        console.log(this.foo);
    }
};

---

1. 일반 변수 (string, int, boolean, float)
   배열 --> 원소 형태로 일반변수, JSON
   JSON --> 배열이나 또 다른 JSON 포함 가능
   [본문으로]