Javascript & JQuery & CSS

앞서 예제를 통해서 보았지만, JSON 문자열은 자바스크립트 배열과 아주 흡사 합니다. (거의 똑같다고 보셔도 될것 같습니다.)

배열도 그렇지만, 1차원, 2차원, 3차원,,,, 처럼 배열이 존재하는 것처럼, JSON 문자열도 다차원을 지원해 줍니다.

이번에는 그 표현 방법에 대해서 알아보도록 하겠습니다.

먼저 가장 기본이 되는 것은 1차원 입니다.
 

var JSONObject = {"name":"유재석","street":"서울특별시", "age":41, "phone":"011 1234 5678"};

$.each(JSONObject, function(i, n) {
    // 객체의 이름과 가격 프로퍼티를 body 객체에 추가합니다.
    $('body').append(n.name + ": " + n.price + "<br>");
    });

each 명령을 통해 결과값을 출력해 보자.

위와 같이 표현을 합니다. JSONObject 객체의 name, street, age, phone 을 사용할 수 있습니다.

JSONObject.name , JSONObject.street 처럼 사용하면 됩니다.

두번째로 위의 방식은 유재석 이라는 사람에 대한 데이터만 존재합니다.  다른사람의 정보도 표현하고 싶을 경우에는 아래와 같은 방법으로 사용 할 수 있습니다.
 

var JSONObject = [
    {"name":"유재석","street":"서울특별시", "age":41,    "phone":"011 1234 5678"},
    {"name":"강호동","street":"서울특별시", "age":41,    "phone":"011 1234 5678"},
    {"name":"최안규","street":"광주광역시", "age":41,    "phone":"011 1234 5678"}
    ];

문자열에 대괄호 [] 로 묶어 주면 되며, 항목은 콤마(,) 로 구분하여 표현 할 수 있습니다.

데이터 출력은 
 

$('body').append(JSONObject[0].name + ": " + JSONObject[0].street);
$('body').append(JSONObject[1].name + ": " + JSONObject[1].street);
$('body').append(JSONObject[2].name + ": " + JSONObject[2].street);
$('body').append(JSONObject[3].name + ": " + JSONObject[3].street);

위와 같은 형태로 원하는 데이터를 출력 할 수 있습니다.

each() 함수를 이용한다면
 

$.each(JSONObject, function(i, n) {
    // 객체의 이름과 가격 프로퍼티를 body 객체에 추가합니다.
    $('body').append(n.name + ": " + n.price + "<br>");
    });

와 같이 사용할 수 있습니다.

세번째 경우의 데이터를 보도록 합니다.
 

var menu = { "employees1" : [ 
    {"name" : "유재석", "price" : "8,000", "job":"백수1" },
    {"name" : "송종국", "price" : "8,000", "job":"백수2" },
    {"name" : "강호동", "price" : "9,000", "job":"백수3" }],        
    "employees2" : [ 
    {"name" : "김영준", "price" : "8,000", "job":"백수4" },
    {"name" : "정준일", "price" : "8,000", "job":"백수5" },
    {"name" : "최안규", "price" : "8,000", "job":"백수6" }],
    "employees3" : [ 
    {"name" : "이병헌", "price" : "8,000", "job":"백수7" },
    {"name" : "박근혜", "price" : "8,000", "job":"백수8" },
    {"name" : "김민정", "price" : "8,000", "job":"백수9" }]
    };

위 소스와 같이 데이터 형을 지정할 수 있는데요. 회사에 보면 사원이 많이 존재하면, 부서별로 나누어져 있을 수 있습니다.

employees1 ,employees2 , employees3 과 같이 나누어져 있습니다.

employees1 에는 유재석, 송종국, 강호동이 존재하고,
employees2 에는 김영준, 정준일, 최안규가 존재하고,
employees3 에는 이병헌, 박근혜, 김민정이 존재할 경우 JSON 문자열은 위와 같은 방법으로 설정할 수 있습니다.

1차원은 {} 로 묶을 수 있구요.
2차원은 {} 로 묶은 문자열에 대괄호로 묶어 줍니다. [ {} ] 와 같은 형식이 됩니다.
3차원은 [{}] 로 묶여 있는 문자열에 중괄호{} 로 다시 묶어 줍니다. {  [{}]  } 와 같은 형식이 될 수 있습니다.

menu 라는 문자열을 출력하는 방법은 아래와 같습니다.
 

$('body').append( menu.employees1[0].name  + ": " + menu.employees1[0].price + ": "+  menu.employees1[0].job );
$('body').append( menu.employees1[1].name  + ": " + menu.employees1[1].price + ": "+  menu.employees1[1].job );
$('body').append( menu.employees1[2].name  + ": " + menu.employees1[2].price + ": "+  menu.employees1[2].job );

$('body').append( menu.employees2[0].name  + ": " + menu.employees2[0].price + ": "+  menu.employees2[0].job );
$('body').append( menu.employees2[1].name  + ": " + menu.employees2[1].price + ": "+  menu.employees2[1].job );
$('body').append( menu.employees2[2].name  + ": " + menu.employees2[2].price + ": "+  menu.employees2[2].job );

$('body').append( menu.employees3[0].name  + ": " + menu.employees3[0].price + ": "+  menu.employees3[0].job );
$('body').append( menu.employees3[1].name  + ": " + menu.employees3[1].price + ": "+  menu.employees3[1].job );
$('body').append( menu.employees3[2].name  + ": " + menu.employees3[2].price + ": "+  menu.employees3[2].job );