JavaScript_javascript 팁에서 JSON 데이터 사용하기

JSON은 기본 JavaScript 형식입니다. 즉, JavaScript에서 JSON 데이터를 처리하는 데 특별한 API나 툴킷이 필요하지 않습니다.

JSON 구문

JSON은 두 가지 구조로 구성됩니다.

객체 - 이름/값 쌍의 모음입니다. 다른 언어에서는 객체, 레코드, 구조, 사전, 해시 테이블, 키 목록 또는 연관 배열로 이해됩니다. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "이름/값" 쌍은 ","(쉼표)로 구분됩니다.

배열 - 순서가 지정된 값 목록입니다. 대부분의 언어에서는 배열로 이해됩니다. 배열은 "["(왼쪽 대괄호)로 시작하고 "]"(오른쪽 대괄호)로 끝납니다. 값은 ","(쉼표)로 구분됩니다.

JSON에는 변수나 기타 제어 구조가 없습니다. JSON은 데이터 전송에만 사용됩니다.

JSON 데이터를 변수에 할당

예를 들어 새 JavaScript 변수를 생성하고 여기에 JSON 형식의 데이터 문자열을 직접 할당할 수 있습니다.

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"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" }
]
}

이제는 매우 간단합니다. 이제 사람들은 앞서 본 JSON 형식의 데이터를 포함합니다. 그러나 데이터에 접근하는 방법이 아직 명확하지 않아 이것만으로는 충분하지 않습니다.

데이터 액세스

자명해 보이지 않을 수도 있지만 위의 긴 문자열은 실제로 단순한 배열입니다. 이 배열을 JavaScript 변수에 배치하면 쉽게 액세스할 수 있습니다. 실제로 배열 요소를 나타내려면 점 표기법을 사용하면 됩니다. 따라서 프로그래머 목록에 있는 첫 번째 항목의성에 액세스하려면 JavaScript에서 다음과 같은 코드를 사용하면 됩니다.

people.programmers[0].lastName;

배열 인덱싱은 0부터 시작합니다. 따라서 이 코드 줄은 먼저 people 변수의 데이터에 액세스한 다음 프로그래머라는 항목으로 이동한 다음 첫 번째 레코드( [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"

이 구문을 사용하면 추가 JavaScript 툴킷이나 API를 사용하지 않고도 모든 JSON 형식 데이터를 처리할 수 있습니다.

JSON 데이터 수정

마침표와 괄호를 사용하여 데이터에 액세스할 수 있는 것처럼 데이터도 같은 방식으로 쉽게 수정할 수 있습니다.

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

문자열을 JavaScript json 형식의 객체로 변환한 후 변수의 데이터를 이렇게 수정할 수 있습니다.

참고: json 형식 개체와 json 텍스트는 다릅니다

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串（ json 格式的文本）

다시 문자열로 변환

물론 개체를 이 기사에 언급된 텍스트 형식으로 다시 쉽게 변환할 수 없다면 모든 데이터 수정은 별 가치가 없습니다. 이 변환은 JavaScript에서도 간단합니다.

var newJSONtext = people.toJSONString();

그렇습니다! 이제 Ajax 애플리케이션의 요청 문자열 등 어디에서나 사용할 수 있는 텍스트 문자열이 생겼습니다.

더 중요한 점은 모든 JavaScript 개체를 JSON 텍스트로 변환할 수 있다는 것입니다. 원래 JSON 문자열로 할당된 변수를 처리하는 것만이 가능한 것은 아닙니다. myObject라는 개체를 변환하려면 동일한 형식의 명령을 실행하면 됩니다.

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

이것이 JSON과 다른 데이터 형식의 가장 큰 차이점입니다. JSON을 사용하는 경우 간단한 함수를 호출하여 바로 사용할 수 있는 형식화된 데이터를 가져오면 됩니다. 다른 데이터 형식의 경우 원시 데이터와 형식화된 데이터 간의 변환이 필요합니다. 문서 개체 모델(자신의 데이터 구조를 텍스트로 변환하는 기능을 제공하는)과 같은 API를 사용하는 경우에도 기본 JavaScript 개체 및 구문을 사용하는 대신 API를 배우고 API의 개체를 사용해야 합니다.

마지막 결론은 많은 수의 JavaScript 개체를 처리하는 경우 데이터를 서버 측 프로그램에 보낼 수 있는 형식으로 쉽게 변환할 수 있으므로 JSON이 거의 확실히 좋은 선택이라는 것입니다. 요청(Ajax).

JSON 문자열을 JSON 객체로 변환하는 방법

위의 str1을 사용하려면 먼저 다음 방법을 사용하여 JSON 개체로 변환해야 합니다.

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

또는

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

또는

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

그러면 다음과 같이 읽을 수 있습니다.

Alert(obj.name);
Alert(obj.sex);

특별 참고 사항: obj가 원래 JSON 객체인 경우 eval() 함수를 사용하여 변환한 후에도 여전히 JSON 객체이지만(여러 번 변환되더라도),parseJSON을 사용한 후에는 문제가 발생합니다. () 함수를 사용하여 이를 처리합니다(구문 예외 발생).