[Java Script] JSON (Java Script Object Notation)

JSON (Java Script Object Notation)

말 그대로 JavaScript Object 형태로 전송을 한다는 뜻이다. (자바 스크립트 오브젝트 형태로 통신하는 것!)

XML과 함께 최근 데이터 전송 시 굉장히 많이 활용된다.
※ 다만 보안이 강조되는 데이터에서는 사용하지 않는 편이 좋다. (개발자 모드에서 모두 확인할 수 있으니까)

JSON 형태(모양) 문자열로 통신을 많이 한다. (문자열 화 시켜서 던져준다.)
(웹개발자라면 javascript를 모를 수가 없기 때문에 모두가 알고 있다고 생각하고 사용하는 것이다)

JSON 에서 알아둬야 할 두 가지 자료 구조는 아래와 같다.

• var obj = {"key" : value};
• var arr = {1,2,3,4,5};

{
	"employees":[ // key가 배열이고
      {"firstName" : "John", "lastName" : "Doe"}, // 0번 인덱스
      {"firstName":"Anna", "lastName":"Smith"}, // 1번 인덱스
      {"firstName":"Peter", "lastName":"Jones"} // 2번 인덱스
    ]
}

그렇다면 어떻게 사용해줄 수 있을까?

<script>
  
  	var obj = {};` : Objcet
	var arr = [];` : Array 
	// 위 두개의 형태를 JSON 이라고 부른다.
    
	var info = {age:20};
	info.firstName = 'gil-dong'; // 문자열로 인식하기 때문에 변수가 먹히지 않는다.
	info['lastName'] = 'Hong'; // 변수에 있는 값을 활용하기 위해서는 해당 방식을 사용한다.

	arr.push(info); // info에 있는 값을 arr에 넣어준다.
	console.log(arr);

	obj.list = arr;
	console.log(obj);
</script>

콘솔에 출력된 내용을 살펴보면 info의 값이 arr 이라는 배열에 0번 인덱스에 담겨있는 것과
arr에 담은 값을 obj의 list라는 키(key)의 0번 인덱스에 오브젝트로 담아져 있는 것을 볼 수 있다.

---

json을 text 로 바꾸는 방법 ▼ JSON.stringify()

var txt = JSON.stringify(obj);
console.log(txt);

해당 코드는 obj라는 객체를 문자열화 해서 txt 변수에 넣어준 뒤 콘솔로 출력해주는 것이다.

해주면 이렇게 문자열화 해서 출력을 해준다.

text 를 json으로 바꾸는 방법 ▼ JSON.parse()

var obj = JSON.parse(txt);
console.log(obj);
console.log(txt);

위에가 JSON 형태 아래가 text 형태이다.

※ JSON은 작성시 문법 오류가 굉장히 많이 나기때문에 http://json.parser.online.fr/ 해당 사이트에서 작성된 JSON이 맞는지 확인해주는 것이 좋다!