JSON(Javascript Object Notation)

💖 JSON(Javascript Object Notation)

---

🌷 JSON: 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식

 

 

💐 자바스크립트에서는 JSON이 두 가지 측면으로 사용

• JSON이 자바스크립트 문법으로서 사용된다는 점
  (하나의 객체 안에 함수와 변수를 함께 그룹화하여 포함시키기 위한 문법의 형태로 JSON 표기법이 사용된다)
• JSON 자체가 하나의 데이터로서 사용되는 경우

 

💐 JSON은 다음과 같은 특징을 가지고 있다

1. JSON은 JavaScript를 기반으로 만들어 졌으며 특정 언어에 종속되지 않는 완벽한 독립적인 텍스트 형식을 가지고 있다.
2. JSON 객체의 데이터는 ①이름(key) / 값 (value)의 쌍으로 구성하며 { 로 시작해서 }로 종료하면 된다.
   ②key와 value 사이에는 콜론으로 구분한다. 그리고 ③각각의 데이터와 데이터 사이에는 콤마(,)로 구분한다.
   ④key는 문자열로 만들기 때문에 " " 또는 ''로 묶어준다.

 

 

 

💖 1) JSON 표기법의 기본 형식

빈 객체("{}") 안에 배열과 같이 콤마(,)로 구별하여 여러 개의 값을 하나의 객체 안에 포함시킨다.

이때 "이름:값"의 형태로 할당한다.

let 객체명 = {이름:값, 이름:값, 이름:값};

 

할당된 데이터에 접근하기 위해서는 "객체명.이름"의 형태로 접근한다

let value = 객체명.이름	// 저장된 값을 읽기
객체명.이름 = "값"	// 새로운 값을 대입

 

💖 2) JSON에 배열 데이터 할당하기

저장하고자 하는 값이 배열이라면

let 객체명 = {이름:값, 이름:["값1", "값2", "값n"], 이름:값};

할당된 데이터에 접근하기 위해서는 "객체명.이름[인덱스]"의 형태로 접근한다.

 

💖 3) JSON을 포함하는 JSON

let 객체명 = {
	하위객체명:{이름:값, 이름:값},
	하위객체명:{이름:값, 이름:값},
	하위객체명:{이름:값, 이름:값}
};

JSON 데이터의 하위 데이터로 접근하고자 할 경우는 .을 통하여 계층을 표현한다.

객체명.하위객체명.값의이름

 

💖 4) JSON을 포함하는 배열

let 객체명 = {
	하위 객체명 : [
		{이름:값, 이름:값},
		{이름:값, 이름:값},
		{이름:값, 이름:값}
	]
};

JSON 데이터의 하위 데이터로 접근하고자 할 경우는 .을 통하여 계층을 표현한다.

객체명.하위객체명[index].값의이름

 

💖 5) JSON 표기법을 적용한, 객체지향 구현

JSON 표기법은 자바스크립트 안에서 데이터 표현을 위한 표현법으로 사용되기도 하지만, 함수와 필드를 하나의 그룹으로 묶기 위한 문법으로서 사용되기도 한다.

let 객체명 = {
	"필드명": ＂값",
	함수명:function(){ … },
	함수명:function(){ … }
};

JSON 내부의 함수는 " 객체명.함수명(); " 으로 접근하면 된다.

 

💖 6) JSON을 포함하는 배열

메서드	설명
parse()	String 객체를 JSON으로 변환해 준다
stringify()	JSON 객체를 String으로 변환해 준다

let user = { name : 'javauser',
	email : 'javauser@naver.com',
	phone : '02-506-3536' };
let userStr = JSON.stringify(user);
document.getElementById("string").innerHTML = userStr;

let userJson = "";
console.log(typeof(JSON.parse(userStr)));
JSON.parse(userStr, function(key,value){
	if(key!=""){ userJson += key+" : "+value +"<br />"; }
});
document.getElementById("json").innerHTML = userJson;