choice blog

html에서 json 데이터 불러오기

아래와 같은 json파일이 있다고 가정하자.

[
   {
      "name":"정수동",
      "age":24,
      "address":"서울시",
      "height":181.1
   },
   {
      "name":"심청",
      "age":14,
      "address":"강원시",
      "height":155.4
   },
   {
      "name":"향단",
      "age":17,
      "address":"남원시",
      "height":159.2
   },
   {
      "name":"이몽룡",
      "age":18,
      "address":"공주시",
      "height":173.3
   }
]

예시 1

<p id="demo"></p>

<script type="text/javascript">

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
	if(xhttp.readyState == 4 && xhttp.status == 200){
		jsonfunc(this.responseText); //this = xhttp
//		jsonfunc(xhttp.responseText); // 둘다 가능
	}
}
xhttp.open("GET","member.json", true);
xhttp.send();

function jsonfunc( jsonText ) {

	let json = JSON.parse(jsonText); // String -> json으로 변환
	
	let txt = "";
	// 접근법 1
	for(i=0; i<json.length; i++){
		for(key in json[i]){ // key값 가져오기
			txt += key + ":" + json[i][key]; 
		}
		txt += "<br>";
	} 
	document.getElementById('demo').innerHTML = txt;
}
</script>

설명

json도 데이터를 읽어오려면 XML을 사용한다.

이중 for문을 사용하여 key값과 value값을 가져온다.

• XML접근방법 설명글 : https://chlee21.tistory.com/117?category=944966 

예시 2

	// 접근법 2
	for(i=0; i<json.length; i++){
		txt += json[i].name + " " + json[i].age + " " +
			   json[i].address+ " " + json[i].height + "<br>";
	}

설명

for문의 사용법만 달라진다.  key에 바로 접근하여 value값을 가져온다.

보기에 더 명확한 코드라 더 많이 사용하는 형식이다.

실행화면

정수동 24 서울시 181.1
심청 14 강원시 155.4
향단 17 남원시 159.2
이몽룡 18 공주시 173.3

예시 3

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script type="text/javascript">
let json = { // 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("demo1").innerHTML = json.quiz.sport.q1.question[0];
document.getElementById("demo2").innerHTML = json.quiz["sport"].q1.question;
document.getElementById("demo3").innerHTML = json.quiz.sport.q1.options[1];
document.getElementById("demo4").innerHTML = json.quiz.maths.q1.options[2];
</script>

설명

배열로 접근하는 방식이다.

key값.key값.key값.key값 이런식으로 접근한다. value의 index가 1개일 땐 [0]을 사용하지 않는다.

[0]을 사용할 경우 해당 index의 첫번째 문자열만 반환한다.

실행화면

W

Which one is correct team name in NBA?

Los Angeles Kings

12