choice blog

JSON(Java Script Object Notation)

key : value - key값을 통해서 value값을 얻는다.

json은 문자열이 아니다. 완전한 json데이터이다.

블록으로 관리한다.

xml에 비해 접근법이 간단하다.

key값은 영어를 권장한다.

JSON파일의 시작 괄호는 [, { 둘다 사용 가능하다.

JSON파일 예시 

[
    {
    name:"홍길동",
    age:24,
    address:"서울시"
    },
    {
    name:"성춘향",
    age:16,
    address:"남원시"
    }
]

html 접근 예시

 <p id="demo1"></p>
 <p id="demo2"></p>

 <script type="text/javascript">
 let jsonData = [	// json의 형태
					 { // 0번지
						 name:"홍길동",
					   	 age:24 
					 },
					 { // 1번지
						 name:"성춘향",
					   	 age:24 
					 },
					 { // 2번지
						 name:"일지매",
					   	 age:24 
					 }
				 ];
 // alert(jsonData);

 document.getElementById("demo1").innerHTML 
 			= jsonData[0].name + " " + jsonData[0].age;
 
 let jsonText = '{ "name":"홍두깨", "age":25, "주소":"서울시" }';  // 현재는 문자열이다.
 // alert(jsonText);
 
 let jsonObj = JSON.parse(jsonText);
 let jsonStr = JSON.stringify(jsonObj)
 
 document.getElementById("demo2").innerHTML =  jsonObj.name + " " + jsonObj.주소;

 </script> 

설명

json value 접근방법 : json변수명[index].key로 접근할 수 있다.

alert(jsonData) : 문자열이면 문자열 전체가 보일텐데 jsonData이기 때문에 object가 출력된다.

alert(jsonText) : 문자열이기 때문에 문자열 전체가 출력된다.

JSON.parse(jsonText)  : String → json(object) 변경법

JSON.stringify(jsonObj) : json(object) → String 변경법

json을 String형으로 변경시 key값은 ""따옴표 안에 들어가 있어야 한다. 예시) "name"

실행화면

홍길동 24

홍두깨 서울시