JavaScript 에서 JSON 사용 하기

JSON 기초
쉽게 말 하면 JSON 은 JavaScript 대상 에 표 시 된 데 이 터 를 문자열 로 변환 한 다음 함수 간 에 이 문자열 을 쉽게 전달 하거나 비동기 응용 프로그램 에서 웹 클 라 이언 트 에서 서버 엔 드 프로그램 에 문자열 을 전달 할 수 있 습 니 다.이 문자열 은 좀 이상해 보이 지만, 자 바스 크 립 트 는 쉽게 설명 할 수 있 으 며, JSON 은 이름 / 값 보다 더 복잡 한 구 조 를 나 타 낼 수 있다.예 를 들 어 키 와 값 의 간단 한 목록 뿐만 아니 라 배열 과 복잡 한 대상 을 나 타 낼 수 있다.
단순 JSON 예시
가장 간단 한 형식 으로 다음 과 같은 JSON 으로 이름 / 값 을 표시 할 수 있 습 니 다.

{ "firstName": "Brett" } 

이 예 는 매우 기본 적 이 고 실제 적 으로 같은 효 과 를 가 진 일반 텍스트 이름 / 값 보다 더 많은 공간 을 차지 합 니 다.

firstName=Brett

그러나 여러 개의 이름 / 값 을 한데 묶 으 면 JSON 은 그 가 치 를 나타 낸다.우선, 여러 개의 이름 / 값 이 맞 는 기록 을 만 들 수 있 습 니 다. 예 를 들 어:

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }

문법 적 으로 는 명칭 / 값 대 에 비해 큰 장점 이 없 지만, 이 경우 JSON 이 사용 하기 쉽 고 가 독성 이 좋다.예 를 들 어 상기 세 가지 값 이 모두 같은 기록 의 일부분 임 을 명확 하 게 나타 낸다.괄호 가 이 값 들 로 하여 금 어떤 관 계 를 가지 게 했다.
값 의 배열
한 그룹의 값 을 표시 해 야 할 때 JSON 은 가 독성 을 높 일 뿐만 아니 라 복잡성 도 줄 일 수 있다.예 를 들 어 이름 목록 을 표시 하고 싶다 고 가정 합 니 다.XML 에 서 는 시작 표시 와 끝 표시 가 많이 필요 합 니 다.전형 적 인 이름 / 값 쌍 (본 시리즈 앞에서 보 았 던 이름 / 값 쌍) 을 사용 하려 면 전용 데이터 형식 을 만 들 거나 키 이름 을 person1-firstName 으로 수정 해 야 합 니 다.
JSON 을 사용 하면 괄호 가 있 는 여러 개의 기록 을 묶 으 면 됩 니 다.

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }
]}

이해 하기 어렵 지 않 습 니 다.이 예제 에 서 는 people 라 는 변수 만 있 습 니 다. 값 은 세 개의 항목 을 포함 하 는 배열 입 니 다. 각 항목 은 한 사람의 기록 입 니 다. 그 중에서 이름, 성, 이메일 주 소 를 포함 합 니 다.위의 예제 에 서 는 기록 을 괄호 로 조합 하 는 방법 을 보 여 줍 니 다.물론 같은 문법 으로 여러 개의 값 을 표시 할 수 있 습 니 다 (각 값 은 여러 개의 기록 을 포함 합 니 다).

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

여기 서 가장 주의해 야 할 것 은 여러 개의 값 을 표시 할 수 있 고 모든 값 은 여러 개의 값 을 포함한다.그러나 주 항목 (programmers, authors, musicians) 에 따라 실제 이름 / 값 이 다 를 수 있 음 을 주의해 야 한다.JSON 은 완전 동적 으로 JSON 구조의 중간 에 데 이 터 를 표시 하 는 방식 을 바 꿀 수 있다.
JSON 형식의 데 이 터 를 처리 할 때 지 켜 야 할 미리 정 의 된 제약 조건 이 없습니다.따라서 같은 데이터 구조 에서 데 이 터 를 표시 하 는 방식 을 바 꿀 수 있 고 심지어 다른 방식 으로 같은 사물 을 표시 할 수 있다.







JavaScript 에서 JSON 사용 하기
JSON 형식 을 익 힌 후 자 바스 크 립 트 에서 사용 하 는 것 은 간단 하 다.JSON 은 JavaScript 네 이 티 브 형식 으로 JavaScript 에서 JSON 데 이 터 를 처리 할 때 특별한 API 나 공구 꾸러미 가 필요 없다 는 뜻 이다.
JSON 데 이 터 를 변수 에 할당 합 니 다.
예 를 들 어 새로운 JavaScript 변 수 를 만 든 다음 JSON 형식의 데이터 문자열 을 직접 할당 할 수 있 습 니 다.

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

이것 은 매우 간단 하 다.현재 people 는 앞에서 본 JSON 형식의 데 이 터 를 포함 하고 있 습 니 다.하지만 데이터 에 접근 하 는 방식 이 뚜렷 하지 않 은 것 같 아 부족 하 다.
접근 데이터
뚜렷 해 보이 지 는 않 지만 위의 긴 문자열 은 사실상 하나의 배열 일 뿐이다.이 배열 을 자 바스 크 립 트 변수 에 넣 으 면 쉽게 접근 할 수 있 습 니 다.실제로 점 호 표현법 으로 수조 원 소 를 표시 하기 만 하면 된다.따라서 programmers 목록 의 첫 번 째 항목 의 성 씨 를 방문 하려 면 자바 스 크 립 트 에서 다음 과 같은 코드 를 사용 하 십시오.

people.programmers[0].lastName;

배열 색인 은 0 에서 시작 합 니 다.따라서 이 코드 는 먼저 people 변수 중의 데 이 터 를 방문 합 니 다.그리고 programmers 라 는 항목 으로 이동 하여 첫 번 째 기록 [0] 으로 이동 합 니 다.마지막 으로 접근 lastName 키 의 값 입 니 다.결 과 는 문자열 값 'McLaughlin' 입 니 다.
다음은 같은 변 수 를 사용 하 는 몇 가지 예제 입 니 다.

people.authors[1].genre			// Value is "fantasy"

people.musicians[3].lastName		// Undefined. This refers to the fourth entry,
 and there isn't one

people.programmers.[2].firstName	// Value is "Elliotte"




<script type="text/javascript">

 var d =  {"programmers": [ 
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]"}, 
    { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" }, 
    { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } ]
};

for(i=0;i<d.programmers.length;i++)
    alert(d.programmers[i].firstName)
    
 </script>

이러한 문법 을 이용 하면 JSON 형식의 데 이 터 를 처리 할 수 있 으 며 추가 적 인 자바 스 크 립 트 패키지 나 API 를 사용 하지 않 아 도 됩 니 다.
JSON 데이터 수정
점 과 괄호 로 데 이 터 를 접근 할 수 있 듯 이 같은 방식 으로 데 이 터 를 쉽게 수정 할 수 있 습 니 다.

people.musicians[1].lastName = "Rachmaninov";

문자열 을 자 바스 크 립 트 대상 으로 변환 하면 변수의 데 이 터 를 이렇게 수정 할 수 있 습 니 다.
변환 문자열
물론 대상 을 본문 에서 언급 한 텍스트 형식 으로 쉽게 바 꾸 지 못 하면 모든 데이터 수정 은 큰 가치 가 없다.자 바스 크 립 트 에서 도 이러한 변환 은 매우 간단 하 다.

String newJSONtext = people.toJSONString();

이렇게 하면 돼!현재 모든 곳 에서 사용 할 수 있 는 텍스트 문자열 을 얻 었 습 니 다. 예 를 들 어 Ajax 응용 프로그램의 요청 문자열 로 사용 할 수 있 습 니 다.
더 중요 한 것 은 모든 자 바스 크 립 트 대상 을 JSON 텍스트 로 변환 할 수 있다 는 것 이다.JSON 문자열 로 할당 한 변수 만 처리 하 는 것 이 아 닙 니 다.myObject 라 는 대상 을 전환 하기 위해 서 는 같은 형식의 명령 만 수행 하면 됩 니 다.

String myObjectInJSON = myObject.toJSONString();

이것 이 바로 JSON 과 본 시리즈 에서 논의 한 다른 데이터 형식 간 의 가장 큰 차이 이다.JSON 을 사용 하면 간단 한 함수 하나만 호출 하면 포맷 된 데 이 터 를 얻어 바로 사용 할 수 있다.다른 데이터 형식 에 대해 서 는 원본 데이터 와 포맷 데이터 사이 에서 변환 해 야 합 니 다.Document Object Model 과 같은 API 를 사용 하 더 라 도 (자신의 데이터 구 조 를 텍스트 로 변환 하 는 함 수 를 제공 합 니 다) 이 API 를 배우 고 API 를 사용 하 는 대상 은 원생 의 JavaScript 대상 과 문법 을 사용 하 는 것 이 아 닙 니 다.
최종 결론 은 대량의 자 바스 크 립 트 대상 을 처리 하려 면 JSON 은 거의 좋 은 선택 일 것 이다. 그러면 데 이 터 를 요청 에서 서버 엔 드 프로그램 에 보 낼 수 있 는 형식 으로 쉽게 변환 할 수 있다.