728x90
API 데이터 제공 사이트 >> 공공데이터포털 data.go.kr
data.jsp
<%@ page language="java" contentType="text/html; charset=euc-kr" pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Member List</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/data.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 style="text-align:center;">JSON Data List</h1>
<table class="table table-striped" id="member_table">
<thead>
<tr>
<th>No</th>
<th>관할 경찰서</th>
<th>다발지역위치</th>
<th>경상자수</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
data.js
$(document).ready(function(){
$.ajax({
//ajax 옵션 설정
url:"http://apis.data.go.kr/B552061/jaywalking/getRestJaywalking?serviceKey=발급받은key",
type:"GET",
dataType:"json",
success:function(data){
let api_data="";
$.each(data.items.item, function(key, value){
api_data += "<tr>";
api_data += "<td>"+key+"</td>";
api_data += "<td>"+value.sido_sgg_nm+"</td>";
api_data += "<td>"+value.spot_nm+"</td>";
api_data += "<td>"+value.sl_dnv_cnt+"</td>";
api_data += "</tr>";
});
$('#member_table').append(api_data);
}
});
});
'JAVASCRIPT' 카테고리의 다른 글
| [JS] 인증번호 1분에 최대 5번만 호출 - 개발자 배찌 (0) | 2022.10.13 |
|---|---|
| [JS] 실무 - chart.js 활용해서 그래프 만들어보기 - 개발자 배찌 (0) | 2022.10.07 |
| [JS] JSON 데이터를 웹페이지로 출력하기 (0) | 2022.01.07 |
| [JS] JSON.parse(), JSON.stringify() _객체와 문자열로 변환하기 (0) | 2022.01.07 |
| [JS] 중첩된 JSON 데이터 다루기 (0) | 2022.01.07 |