JavaScript JSON

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

JSON은 서버에서 웹으로 데이터를 전송할 때 자주 사용됩니다.

JSON이 무엇인가요?

  • JSON 은 JavaScript Object Notation
  • JSON은 가벼운 데이터 교환 형식입니다
  • JSON은 언어에 독립적입니다 *
  • JSON은 "자기 설명적인"이며 이해하기 쉽습니다

* JSON의 문법은 JavaScript 객체 기호의 문법에서 나왔지만, JSON 형식은 순수 텍스트입니다. JSON 데이터를 읽고 생성하는 코드는 어떤 프로그래밍 언어로 작성할 수 있습니다.

JSON 예제

JSON 문법은 다음과 같이 정의되었습니다: 포함된 세 명의 직원 기록을 가진 배열(객체):

JSON 예제

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON 형식은 JavaScript 객체로 평가됩니다

JSON 형식은 JavaScript 객체를 생성하는 코드와 문법적으로 같습니다.

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

JSON 문법 규칙

  • 데이터는 이름/값 쌍입니다
  • 데이터는 콤마로 구분됩니다
  • 괄호로 객체를 저장합니다
  • 괄호로 배열을 저장합니다

JSON 데이터 - 이름과 값

JSON 데이터는 이름/값 쌍으로 쓰여져서 JavaScript 객체 속성과 유사합니다.

이름/값 쌍은 (더블 쿼otation에 있는) 필드 이름으로 구성되며, 그 뒤에는 콜론이 있고, 그 뒤에는 값이 있습니다:

"firstName":"Bill"

JSON 이름은 더블 쿼otation이 필요합니다. JavaScript 이름은 필요하지 않습니다.

JSON 객체

JSON 객체는 괄호로 쓰입니다.

JavaScript와 마찬가지로, 객체는 여러 이름/값 쌍을 포함할 수 있습니다:

{"firstName":"Bill", "lastName":"Gates"}

JSON 배열

JSON 배열은 괄호로 쓰입니다.

JavaScript와 마찬가지로, 배열은 객체를 포함할 수 있습니다:

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

위의 예제에서, "employees" 객체는 배열입니다. 그것은 세 개의 객체를 포함합니다.

각 객체는 사람의 한 명의 기록을 대표합니다(이름과 성이 포함됩니다).

JSON 텍스트를 JavaScript 객체로 변환합니다

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

간단히 하기 위해 문자열을 입력으로 사용할 수 있습니다.

먼저, JSON 문법을 포함한 JavaScript 문자열을 생성합니다:

var text = '{ "employees" : [
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

그런 다음, JavaScript의 내장 함수 JSON.parse()를 사용하여 이 문자열을 JavaScript 객체로 변환하십시오:

var 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에 대해 더 많은 내용을 중국어로 읽을 수 있습니다.