[JSON] JSON이란?

JSON ( JavaScript Object Notation )

• Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
• 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용
• 데이터가 한 쌍으로 이루어져 있다. (pair) → key:value (hash map)
• web에서의 json이 java에서 map, list로 매핑된다.

[10, 20, 180] 데이터가 오면 어떤 값을 나타내는지 알 수 없다. 
→ { num:10, age:20, height:180 } 와 같이 키 값으로 명시해주면 알 수 있다.

xml은 tag로 명시, json은 key값으로 명시

 

• format

let jsonData = [ 
			{
				name : "홍길동",
				age : 24
			}, 
            {
				name : "성춘향",
				age : 16
			}, 
            {
				name : "임꺽정",
				age : 33
			} 
		];
document.getElementById('demo').innerHTML = jsonData[0].name + " " + jsonData[0].age;

 

• String to JSON

let arrText = {name : "홍길동",age : 24,address : "서울시"};	// JSON
let arrText = '{"name" : "홍길동","age" : 24,"address" : "서울시"}';	// String

// String -> json
let jsonObj = JSON.parse(arrText);
document.getElementById('demo').innerHTML = jsonObj.name;

KEY값은 "" 로 감싸주는 것이 안전하다. String에서 JSON으로 parsing 하려면 key값도 String 형태여야 한다.

 

• JSON to String

// json -> String
let str = JSON.stringify(jsonObj);
alert(str);

 

• 데이터에 접근하고자 할 때 

let NBAjson = {
	"quiz" : {
		"sport" : {
			"q1" : {
				"question" : "Which one is correct team name in NBA?",
				"options" : [ "New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ],
				"answer" : "Huston Rocket"
			}
		},
		"maths" : {
			"q1" : {
				"question" : "5 + 7 = ?",
				"options" : [ "10", "11", "12", "13" ],
				"answer" : "12"
			},
			"q2" : {
				"question" : "12 - 8 = ?",
				"options" : [ "1", "2", "3", "4" ],
				"answer" : "4"
			}
		}
	}
};
document.getElementById('demo').innerHTML = NBAjson.quiz.sport.q1.question;
document.getElementById('demo').innerHTML = NBAjson.quiz.sport.q1.options[2];
document.getElementById('demo').innerHTML = NBAjson.quiz.maths.q1.options[2];

데이터에 대한 접근이 쉽고 간편하다. 배열의 형태로 접근 가능

 

• for문을 통해 모든 데이터에 접근하고자 할 때 

for (var i = 0; i < jsonData.length; i++) {
	for (key in jsonData[i]) {
		txt += key + " : " + jsonData[i][key] + " ";
	}
	txt += "<br>";
}

1. for문과 foreach문을 함께 사용해서 key값을 몰라도 접근 가능. 간편하다는 장점이 있다.

for (var i = 0; i < jsonData.length; i++) {
	txt += jsonData[i].name + " " + jsonData[i].age + " " + 
    jsonData[i].address + " " + jsonData[i].height + "<br>";
}

2. key값을 알고있을 경우 코드가 더 직관적으로 보기 좋다. 그러나 다소 복잡함.

결과는 동일

 

• json 파일에서 참조할 때

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
		jsonFunc(this);
	}
}
xhttp.open("GET", "member.json", true);
xhttp.send();

xhttp 활용. xhttp는 웹 서버와 데이터 교환을 백그라운드에서 비동기적으로 가능하게 해준다. xml 과 동일하다.