준비물
1. JSON파일
[
{
"id":1,
"name":"이상혁",
"age":26,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"Progammer",
"hobby":"책보기"
},
{
"id":2,
"name":"김종인",
"age":28,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"Archer",
"hobby":"게임하기"
},
{
"id":3,
"name":"배준식",
"age":28,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"Programmer",
"hobby":"캠핑가기"
},
{
"id":4,
"name":"이현우",
"age":33,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"Gabber",
"hobby":"해설하기"
},
{
"id":5,
"name":"홍민기",
"age":29,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"Programmer",
"hobby":"운전하기"
},
{
"id":6,
"name":"장용준",
"age":24,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Male",
"job":"WebDesigner",
"hobby":"마라톤"
},
{
"id":7,
"name":"박옥자",
"age":25,
"address":"서울시 서초구 양재동 OO물산 307-12 양재로 111",
"gender":"Female",
"job":"Programmer",
"hobby":"개그"
}
]2. html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exam 001</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h4 style="text-align:center; padding-top:50px;">JSON data to WebPage table with getJSON method</h4>
<br>
<table class="table table-bordered" id="member_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Job</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="./exam_001.js"></script>
</body>
</html>부트스트랩을 쓰기 때문에 head 안에 쓰여져 있는 부분을 추가해야 한다.
table class에 table을 주면 이쁘게 테이블이 보여진다.
id를 작성해야 제이쿼리로 불러올 수 있다.
<thead>, <tbody>를 반드시 작성해야 한다.
3. JS파일
$(document).ready(function(){
$.getJSON("exam_001.json",function(data){
//할 일 처리
let member_data="";
$.each(data,function(key,value){
console.log(key);
member_data+="<tr>";
member_data+="<td>"+value.id+"</td>"
member_data+="<td>"+value.name+"</td>"
member_data+="<td>"+value.age+"</td>"
member_data+="<td>"+value.address+"</td>"
member_data+="<td>"+value.gender+"</td>"
member_data+="<td>"+value.job+"</td>"
member_data+="<td>"+value.hobby+"</td>"
member_data+="</tr>";
});
$("#member_table").append(member_data);
});
});- exam_001.json 파일을 찾아 data를 받아온다음 value를 반복문을 돌면서 member_data에 태그와 함께 더해준다.
- 데이터가 다 들어오면 제이쿼리 $("#member_table).append(member_data); tbody 아래 부분에 값을 append 시킨다.
'공공데이터API 활용' 카테고리의 다른 글
| 10. Servlet JSP vs JSON 연동하기 - 공공데이터 포털사이트 JSON 연동 (0) | 2022.01.21 |
|---|---|
| 9. Servlet JSP vs JSON 연동하기 - 실습 (0) | 2022.01.21 |
| 7. 자바(이클립스)에서 공공API 요청 및 출력(2) (0) | 2022.01.21 |
| 7. 자바(이클립스)에서 공공 API요청 및 출력(1) (0) | 2022.01.21 |
| 6. JSON 데이터를 웹 페이지로 출력하기 (0) | 2022.01.20 |
