JSON
JavaScript Object Notation
좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준
자바스크립트 객체 문법(객체 리터럴)
XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안
JSON은 텍스트 기반
구조화된 데이터 표현을 위한 '표준' 형식
데이터 전송 시 사용
웹 어플리케이션에서 데이터를 전송할 떄 일반적으로 사용
JSON은 순수히 데이터 포맷 => 오직, property만 담을 수 있다. (key, value)
메서드는 담을 수 없다.
1.문자열 형태 , 따옴표 표시 ,(쉼표)로 나열한다
2.객체(object)는 중괄호({})로 둘러쌓아 표현
3.배열(array)은 대괄호([])로 둘러쌓아 표현
1.JSON 데이터
JSON 데이터는 이름과 값의 쌍으로 구성
JSON 데이터는 데이터 이름, 콜론(:), 값의 순서로 구성
"데이터이름" : 값
//데이터의 이름도 문자열이므로, 항상 큰따옴표("")와 함께 입력
"name" : "홍길동"- 데이터의 값의 가능한 타입
- number
- string
- boolean
- object
- array
- null
2. JSON 객체
중괄호({})로 둘러쌓아 표현 , 브레이스라고도 한다.
쉼표를 사용하여, 여러 프로퍼티를 포함할 수 있다.
var jsonData={
"name": "홍길원",
"age" : 30,
"gender" : "남",
"interests" :["음악","댄스"],
"family":{"father" : "홍투길","mom":"김연삼"},
"school": null,
"graduate":true
};
3 .JSON 메소드
자바스크립트는 JSON 데이터를 처리하기 위한 다음과 같은 메소드를 제공
1. JSON.stringify()
2. JSON.parse()
3. toJSON()
3-1 . JSON.stringify()
인수로 전달받은 자바스크립트객체 ==> 문자열로 변환(JSON객체)
<JSON 형식의 문자열을 반환>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="json"></div>
<script>
var profile={
"name": "홍길원",
"age" : 30,
"gender" : "남",
"interests" :["음악","댄스"],
"family":{"father" : "홍투길","mom":"김연삼"},
"school": null,
"graduate":true
};
//(``)백틱을 이용하지않으면 js객체
//JSON.stringify()
//자바스크립트 객체=>JSON 객체
var profileJson = JSON.stringify(profile)
console.log(typeof profileJson) //문자열형태
document.getElementById("json").innerHTML=profileJson
</script>
</body>
</html>3-2. JSON.parse()
JSON객체(문자열)==>자바스크립트 객체
var jsonData=`{
"name": "홍길원",
"age" : 30,
"gender" : "남",
"interests" :["음악","댄스"],
"family":{"father" : "홍투길","mom":"김연삼"},
"school": null,
"graduate":true
}`;
//``(백틱)을 이용하면 JSON 객체
//JSON 객체 ==> 자바스크립트 객체
var jsData = JSON.parse(jsonData);
console.log(jsData.interests[0])3-3. toJSON()
자바스크립트의 Date 객체의 데이터를 JSON형식의 문자열로 변환해서 반환한다.
'Date.prototype 객체'에서만 사용가능
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="timeJS"></div>
<div id="timeJSON"></div>
<script>
//js Date 객체
var date= new Date();
//Mon Dec 26 2022 03:01:26 GMT+0900 (한국 표준시)
console.log(date)
//Date객체를 JSON 형식의 문자열로 변환
var str = date.toJSON();
//2022-12-25T18:01:40.929Z
console.log(str)
document.getElementById("timeJS").innerHTML=date +"<br>"
document.getElementById("timeJSON").innerHTML=str;
</script>
</body>
</html>
'Javascript(문법)' 카테고리의 다른 글
| Ajax(4)-fetch (0) | 2022.12.26 |
|---|---|
| Ajax(3)-XMLHttpRequest (0) | 2022.12.25 |
| Ajax(2)-Ajax (1) | 2022.12.25 |
| Ajax(1)-http (0) | 2022.12.25 |
| 배열의 분리&합침 (0) | 2022.12.18 |
