[JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )
프로그래밍 언어/JavaScript

[JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )

반응형

예제코드 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id='demo'></p>

<script type="text/javascript">
let json = {
	       "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 = json.quiz.sport.q1.question;
document.getElementById('demo').innerHTML = json.quiz['sport'].q1.question; //result : Which one is correct team name in NBA?
document.getElementById('demo').innerHTML = json.quiz.sport.q1.options[2]; //result : Golden State Warriros
document.getElementById('demo').innerHTML = json.quiz.maths.q1.options[2]; //result : 12

</script>
</body>
</html>

json의 경우 xml과는 다르게 단순하게 .(dot)을 통해서 접근이 가능하다.

options의 경우처럼 여러개의 value가 있는 경우 배열의 인덱스를 통해서 접근이 가능하다.

예제코드 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id='demo'></p>
<table id='mytable' border="1">
	<tr>
		<th>번호</th><th>제목(title)</th><th>저자(author)</th><th>가격(price)</th>
	</tr>
</table>

 <script type="text/javascript">
 
 let table = document.getElementById('mytable');
 
 let xhttp = new XMLHttpRequest(); //json도 parsing 하려면 xml을 사용
 xhttp.onreadystatechange = function(){
	 if(this.readyState == 4 && this.status == 200){ //file을 읽어들이는데 성공한 경우
		 jsonFunc(this.responseText);
	 }
 }

 xhttp.open('GET','book.json',true);
 xhttp.send();
 
 function jsonFunc( jsonText ) {
	let json = JSON.parse(jsonText);

	for(let i=0; i < json.length; i++){
		
		let tr = document.createElement('tr');
		let th = document.createElement('th');
		th.appendChild(document.createTextNode((i+1)+''));
		
		let td1 = document.createElement('td');
		td1.appendChild(document.createTextNode(json[i].title));
		
		let td2 = document.createElement('td');
		td2.appendChild(document.createTextNode(json[i].author));
		
		let td3 = document.createElement('td');
		td3.appendChild(document.createTextNode(json[i].price));
		
		tr.appendChild(th);
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		
		table.appendChild(tr);

	}
}
 
 
 
 </script>
</body>
</html>

book.json

[
	{
		"title":"자바의 정석",
		"author":"남궁성",
		"price":30000
	},
	{
		"title":"모던 자바스크립트 Deep Dive",
		"author":"이응모",
		"price":45000
	},
	{
		"title":"하루 10분 SQL",
		"author":"한상일",
		"price":24000
	},
	{
		"title":"지쳤거나 좋아하는 게 없거나",
		"author":"강한별",
		"price":13500
	},
	{
		"title":"미드나잇 라이브러리",
		"author":"매트 헤이그",
		"price":15000
	}
	
]

onreadystatechange

XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수이다. 서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출이 된다.

이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 확인할 수 있다.

 

appendChild 메서드를 사용해서 table의 row, clos을 추가해주며. 이때 row와 cols는 json파일의 데이터들을 받아와서 각각 삽입 해주었다.

 

결과

반응형
저작자표시

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript XML Parsing ( new XMLHttpRequest() )  (0) 2021.06.08
[JavaScript] 문자열을 XML파일로 변환하기 (String / XML parsing)  (0) 2021.06.08
[JavaScript] getElements.ByTagName()를 사용한 nodeList 실습  (0) 2021.06.08
[JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes)  (0) 2021.06.08
[JavaScript]이벤트 리스너(event listener)  (0) 2021.06.07

    티스토리툴바