json데이터를 활용한 기초적인 홈페이지WEB JAVA SPRING/JS2023. 8. 24. 17:24
Table of Contents
https://data.seoul.go.kr/dataList/OA-1176/S/1/datasetView.do
열린데이터광장 메인
데이터분류,데이터검색,데이터활용
data.seoul.go.kr
열린데이터광장의 json데이터를 활용하였다.
필드를 체크하고 검색하고 싶은 단어를 치면 결과값이 나온다!
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#D6F0FF">
<FONT SIZE="5"><<<<<<<<서울시 전통시장 현황>>>>>>>></FONT><BR><br>
<img src="시장.jpg" width="500"/><br>
<FONT SIZE="3">데이터 URL: https://data.seoul.go.kr/dataList/OA-1176/S/1/datasetView.do </FONT><br><br>
<script>
var market={
"DESCRIPTION" : {"LAT":"위도","M_NAME":"전통시장명","LNG":"경도","M_CODE":"자치구 코드","GUNAME":"자치구명","M_ADDR":"주소명"},
"DATA" : [
{"guname":"종로구","m_addr":"예지동 293-1","m_name":"광장골목시장","lng":126.9996711,"m_code":"23","lat":37.569375},
{"guname":"서초구","m_addr":"서초구 반포동 163-1","m_name":"강남터미널지하도상점가2구역","lng":126.98606,"m_code":"15","lat":37.5004776},
{"guname":"강남구","m_addr":"압구정동454","m_name":"신사상가","lng":127.0283743,"m_code":"1","lat":37.5322699},
#~~~데이터 생략~~
{"guname":"강남구","m_addr":"청담동134-20","m_name":"청담삼익시장","lng":127.0577476,"m_code":"1","lat":37.5223264}
]
};
document.write("데이터필드수="+Object.keys(market.DESCRIPTION).length+", ");
document.write("레코드수="+Object.keys(market.DATA).length, "<br><br>");
document.write("Data:<br><table border=1><tr><th>no.</th>");
for(k in market.DATA[0]) document.write("<th>"+k+"</th>");
document.write("</tr></table><br>");
</script>
<form onsubmit="return false">
검색 단어:<input type=text name="key" value="" />
필드:<input type=text name="field" value="" />
<input type=submit onclick="search()" value="찾기">
<script>
function Check(form)
{
var msg = "";
if (form.guname.checked)
msg += form.guname.value + "\n";
if (form.m_addr.checked)
msg += form.m_addr.value + "\n";
if (form.m_name.checked)
msg += form.m_name.value + "\n";
if (form.lng.checked)
msg += form.lng.value + "\n";
if (form.m_code.checked)
msg += form.m_code.value + "\n";
if (form.lat.checked)
msg += form.lat.value + "\n";
alert(msg);
}
</script>
<br />
<form name="form1">
<input type="checkbox" name="guname" value="guname"> guname <br />
<input type="checkbox" name="m_addr" value="m_addr"> m_addr <br />
<input type="checkbox" name="m_name" value="m_name"> m_name <br />
<input type="checkbox" name="lng" value="lng"> lng <br />
<input type="checkbox" name=".m_code" value=".m_code"> m_code <br />
<input type="checkbox" name="lat" value="lat"> lat <br />
<script>
var bc;
window.onload=function(){
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
if(inputs[i].type == 'checkbox'){
inputs[i].onclick = function(){
if(bc) bc.checked = false;
document.forms[0].field.value = this.value;
bc = this;
}
}
}
}
</script>
<div id='result'>result</div>
<script>
function search() {
var k=document.getElementsByName("key")[0].value;
var key = new RegExp(k);
var f=document.getElementsByName("field")[0].value;
var html = "";
html += "Data:<br><table border=1><tr><th>no.</th>";
for(k in market.DATA[0])
html += "<th>"+k+"</th>";
html += "</tr>";
var cnt=0;
for(i in market.DATA) {
if(key.test(market.DATA[i][f])) {
cnt++;
html += "<tr><td>"+i+"</td>";
for(k in market.DATA[i])
html += "<td>"+market.DATA[i][k]+"</td>";
html += "</tr>";
}
}
html += "<tr><th>Found</th><th>"+cnt+"</th><th colspan=8>End of Search</th></tr>";
html += "</table>";
document.getElementById('result').innerHTML = html;
}
</script>
</body>
</html>
'WEB JAVA SPRING > JS' 카테고리의 다른 글
| jquery (0) | 2023.09.12 |
|---|---|
| Ajax 개념과 코드 적용(댓글 등록) (0) | 2023.09.12 |
| 자바스크립트 테이블 만들기 (0) | 2023.08.24 |
| 자바스크립트 과목,평균,반평균 점수,순위 출력하기 (0) | 2023.08.24 |
| 자바스크립트 문자열 뒤집기 (0) | 2023.08.24 |
