JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 JSON


JSON은 데이터를 저장하고 전송하기 위한 형식입니다.

JSON은 서버에서 웹 페이지로 데이터를 보낼 때 자주 사용됩니다.


JSON이란 무엇입니까?

  • JSON은 Java S cript 개체 표기법 을 나타 냅니다 .
  • JSON은 경량 데이터 교환 형식입니다.
  • JSON은 언어 독립적입니다. *
  • JSON은 "자체 설명"이며 이해하기 쉽습니다.

* JSON 구문은 JavaScript 객체 표기법 구문에서 파생되지만 JSON 형식은 텍스트 전용입니다. JSON 데이터를 읽고 생성하기 위한 코드는 모든 프로그래밍 언어로 작성할 수 있습니다.


JSON 예제

이 JSON 구문은 직원 객체를 정의합니다. 3개의 직원 레코드(객체) 배열:

JSON 예제

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

JSON 형식은 JavaScript 객체를 평가합니다.

JSON 형식은 JavaScript 객체를 생성하기 위한 코드와 구문적으로 동일합니다.

이러한 유사성 때문에 JavaScript 프로그램은 JSON 데이터를 기본 JavaScript 개체로 쉽게 변환할 수 있습니다.


JSON 구문 규칙

  • 데이터는 이름/값 쌍에 있습니다.
  • 데이터는 쉼표로 구분됩니다.
  • 중괄호는 객체를 보유합니다.
  • 대괄호는 배열을 포함합니다.


JSON 데이터 - 이름과 값

JSON 데이터는 JavaScript 객체 속성과 마찬가지로 이름/값 쌍으로 작성됩니다.

이름/값 쌍은 필드 이름(큰따옴표), 콜론, 값으로 구성됩니다.

"firstName":"John"

JSON 이름에는 큰따옴표가 필요합니다. JavaScript 이름은 그렇지 않습니다.


JSON 객체

JSON 객체는 중괄호 안에 작성됩니다.

JavaScript와 마찬가지로 객체에는 여러 이름/값 쌍이 포함될 수 있습니다.

{"firstName":"John", "lastName":"Doe"}

JSON 배열

JSON 배열은 대괄호 안에 작성됩니다.

JavaScript와 마찬가지로 배열에는 객체가 포함될 수 있습니다.

"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]

위의 예에서 "employees" 개체는 배열입니다. 여기에는 세 가지 개체가 포함되어 있습니다.

각 개체는 사람의 기록입니다(이름과 성을 포함).


JSON 텍스트를 JavaScript 객체로 변환

JSON의 일반적인 용도는 웹 서버에서 데이터를 읽고 웹 페이지에 데이터를 표시하는 것입니다.

단순성을 위해 문자열을 입력으로 사용하여 설명할 수 있습니다.

먼저 JSON 구문이 포함된 JavaScript 문자열을 만듭니다.

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

그런 다음 JavaScript 내장 함수 JSON.parse()를 사용하여 문자열을 JavaScript 객체로 변환합니다.

const obj = JSON.parse(text);

마지막으로 페이지에서 새 JavaScript 개체를 사용합니다.

예시

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

JSON 자습서 에서 JSON에 대해 자세히 읽을 수 있습니다 .