[Javascript] JSON 개념 잡자! / JSON.parse(), JSON.stringify()

JSON이란?

---

JSON이란 Javascript Object Notation의 줄인 말로 쉽게 보면 데이터를 표시하는 포맷이라고 생각하면 쉽다. 자바스크립트 언어로부터 파생되어 자바스크립트 구문의 형식을 따르지만 독립적인 데이터형 포맷이기 때문에 C, C++, 자바, 파이썬 등 다양한 프로그래밍 언어에서 JSON을 활용할 수 있다.

 

JSON은 key : value 형식으로 포맷이 정해져 있으며 주로 비동기 브라우저/서버통신을 위해 사용된다.(Ajax를 통한 데이터 교환의 데이터 포멧으로 사용됨) 항상 큰 따옴표인 “ 로 묶어서 사용한다.

따라서 DATA 값에서 역슬래시(\)와 큰 따옴표(“)는 JSON DATA 인식문제로 사용할 수 없다.

 

\b 백스페이스

\f 폼 피드

\n 개행

\r 캐리지 리턴

\t 탭

\" 따옴표

\/ 슬래시

\\ 역슬래시

\uHHHH 16진수 네자리로되어 있는 유니코드 문자

 

JSON 예

---

(1) 배열(Array)인 경우:  [10. {“name” : “xxxxx”} , [“age”, 25 ]]

(2) 객체(Object)인 경우: {“AAA” : 10 , “BBB” : 20 , “CCC” : true , “DDD” : “ddd”}

 {

     "이름": "테스트",

     "나이": 25,

     "성별": "여",

     "주소": "서울특별시 양천구 목동",

     "특기": ["농구", "도술"],

     "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},

     "회사": "경기 안양시 만안구 안양7동";

 }

 

JSON 관련 사이트

---

(1) http://jsonlint.com/

JSON 데이타가 올바르게 작성되어 있는지, 검증해주는 사이트입니다.

Garry뒤에 " 를 지워봤더니 다음과 같이 검증해주죠.

(2) http://json.parser.online.fr/

JSON data를 정렬해주는 사이트 입니다.

JSON 예제(1)

---

JSON obj는 아래 예제처럼 key 값을 가지고 value에 접근이 가능합니다.

$(document).ready(function(){
	
	var arr = [ "Garry", "Front End Technical Lead", "Photographer", 25 ];
	var obj = { "NAME" : "Garry", "AGE" : 25, "jobTitle" : "Front End Technical Lead", "JOB" : "Photographer" };
	
	$("#test1").html(arr+"
");
	
	for(var objVarName in obj) {
		$("#test2").append(objVarName, " : ", obj[objVarName], "
");
	}

});

<<output>>

Garry,Front End Technical Lead,Photographer,25 

NAME : Garry
AGE : 25
jobTitle : Front End Technical Lead
JOB : Photographer

JSON 예제(2) _ JSON.parse(), JSON.stringify()

---

JSON은 객체 자체를 문자열로 바꿔서 전달할 수도 있습니다.

또한 문자열이 JSON 포멧을 갖추고 있다면 JSON Object로 변환시킬 수도 있죠.

그 역할을 해주는 JSON.parse()와 JSON.stringify()의 예제입니다.

$(document).ready(function(){
	
	//기존 JSON obj를 String으로 만들었습니다.
	var obj = '{ "NAME" : "Garry", "AGE" : 25, "jobTitle" : "Front End Technical Lead", "JOB" : "Photographer" }';
	
	console.log("--------------obj result ----------");
	console.log(obj);
	
	//JSON obj로 만들기
	var jsonObj = JSON.parse(obj);
	console.log("--------------JSON.parse(obj) result ----------");
	console.log(jsonObj);
	
	//다시 String으로 만들기
	var jsonStr = JSON.stringify(jsonObj);
	console.log("--------------JSON.stringify(jsonObj) result ----------");
	console.log(jsonStr);

});

<<output>>

즉 JSON.parse의 경우는 JSON 포멧으로 되어있는 문자열을 JSON 객체로 변환시켜 줍니다. 따라서 JSON.parse(String문자열) 이 들어가야 하죠.

반대로, JSON.stringify()는 object를 JSON 포맷의 문자열로 바꿔주기에 JSON.stringify(Object)가 들어가야 합니다.

http://mkil.tistory.com/201 에 정리해 놓은게 있었다.

JSON 예제(3)

---

복수의 데이터라면 배열을 사용하여 나열이 가능하며 점(.) 으로 데이터 값 순서의 KEY값에 접근이 가능하다.

예제를 보면서 이해해 보자.

$(document).ready(function(){
	
	var obj = { "peoples" : [
						{ "NAME" : "Garry", "AGE" : 25, "jobTitle" : "Front End Technical Lead", "JOB" : "Photographer" },
			   			{ "NAME" : "Merry", "AGE" : 30, "jobTitle" : "Developer", "JOB" : "Developer" },
			   			{ "NAME" : "Heather", "AGE" : 25, "jobTitle" : "Designer", "JOB" : "Designer" }
			   			    ]
			   };
	
	console.log("--------------obj result ----------");
	console.log(obj);
	
	console.log("--------------obj.people.[0].NAME result ----------");
	console.log(obj.peoples[0].NAME);

	console.log("--------------each result ----------");
	$(obj.peoples).each(function(index, people){
		console.log(index + " ::: " , people.NAME);
	});
});

<<output>>

JSON 예제(4) _ json만들기

---

간단한 예제 하나면 설명이 충분할것 같다.

$(document).ready(function() {

	//JSON 객체 생성 방법
	var personInfo = {
			name : "Garry",
			age : 20,
			jobInfo : {
				jobname : 'programmer',
				jobAddress : 'seoul',
				phoneNum : 0101234232315
			}
	};
	
	//배열로 생성 방법
	var hobbyList = new Array();
	var a = {hobby : "programming"};
	var b = {hobby : "baking" , hobby2 : "tiyping", hobby3 : "searching"};
	var c = {hobby : "posting"};
		
	hobbyList.push(a);
	hobbyList.push(b);
	hobbyList.push(c);

	personInfo.hobbyList = hobbyList; //personInfo Object에 hobbyList라는 이름으로 hobbyList를 추가시킨다는 의미.

	console.log("",personInfo);
});