677 No

[동영상강의] javascript11_xml과 json, $.getJSON() 함수를 이용한 json 파싱 방법

2017-09-03 18:46:12 By 머나먼나라 0 1351 댓글수 4 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

json.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
	
</script>
<script>
	$(function() {
		// [ ] 배열
		// { "변수명":"값" , "변수명":"값" } 객체
		// 숫자값은 따옴표를 생략함
		// json 배열
		var s = 
"[{'name':'Hong','age':'21'},{'name':'Kim','age':'25'},{'name':'Park','age':'30'}]";
		console.log("s:" + s);
		// 스트링을 json 객체배열 형식으로 변환함
		// eval( 자바스크립트코드 ):자바스크립트 문장 해석함수
		var students = eval("(" + s + ")");
		console.log("students:" + students);
		students[1].name = "Lee";
		var name = "";
		var age = "";
		for (i = 0; i < 3; i++) {
			name += students[i].name + " ";
			age += students[i].age + " ";
		}
		$("#name").html(name);
		$("#age").html(age);
		/* $("#name").html( students[1].name );
		 $("#age").html( students[1].age ); */
	});
</script>
</head>
<body>
  <h4>학생 명단</h4>
  <p style="background-color: yellow;">
    이름: <span id="name"></span>&nbsp; 나이: <span id="age"></span>
  </p>
</body>
</html>

학생 명단

이름: Hong Lee Park 나이: 21 25 30

json_parse.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
	
</script>
<script>
	$(function() {
		// getJSON( "json파일", 콜백함수 )
		// 콜백함수 : function( json객체배열, 처리상태)
		$.getJSON("student.json", function(data,textStatus) {
			console.log("data:" + data);
			console.log("textStatus:" + textStatus);
			$("#students").append(
"<tr><td>번호</td><td>이름</td><td>전화</td></tr>");
			//반복처리되는 부분
			$.each(data, function() {
				$("#students").append(
						"<tr><td>" + this.num + "</td>" + "<td>" 
						+ this.name + "</td>"
						+ "<td>" + this.tel + "</td></tr>");
			});
		});
	});
</script>
</head>
<body>
  <!-- json 데이터를 파싱하여 테이블로 출력 -->
  <table id="students" style="width: 500px;" border="1">
  </table>
</body>
</html>

student.json

[
{"num":"1", "name":"kim", "tel":"010-222-3333"}
,{"num":"2", "name":"park", "tel":"010-111-4444"}
,{"num":"3", "name":"hong", "tel":"010-333-5555"}
,{"num":"4", "name":"song", "tel":"010-444-7777"}
,{"num":"5", "name":"choi", "tel":"010-555-8888"}
]