JQuery

 

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"}
]

 

출력 =>

번호                      이름                          전화                                         
1 kim 010-222-3333
2 park 010-111-4444
3 hong 010-333-5555
4 song 010-444-7777
5 choi 010-555-8888

 

 

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

나는 이 부서지기 쉬운 육체가 아니다. 이 부서지기 쉬운 육체는 마음과 영혼을 담고 있는 모체이다. -도교

댓글 ( 0)

댓글 남기기

작성