회원에게 보다 정확한 데이터를 제공하기 위해
오픈api를 통해서 원하는 학교의 데이터를 출력하는 기능 구현

나이스교육정보개발포털 학교기본정보 api 데이터셋

🐣 체크리스트

• 팝업창을 통해서 검색 화면 진입
• 부모창의 검색 키워드를 자식창에 출력하여 검색 진행
• ajax로 데이터 출력
• 페이징처리

💾JSP

<div>
  <input type="text" id="keyword" value="" placeholder="초/중/고등학교 명을 입력해주세요.">
  <i class="fa-solid fa-magnifying-glass" style="color: #376cf2;" onclick="search_school()"></i>
</div>
<div>
  <table id="result_table">
  </table>
</div>

💾JS

📂keyword function

부모창의 name 값을 keyword로 가져옴

$(document).ready(function(){
	var keywordInput = opener.$("#name").val();
	$("#keyword").val(keywordInput);
	if($("#keyword").val() != null && $("#keyword").val() != '') {
		search_school();
	}
});

📂search_school

비동기형식으로 학교정보api 진행

function search_school(){
	var keyword = $('#keyword').val();
	var url = apiUrl + "KEY=" + apiKey + "&Type=json&pIndex=1&pSize=1000&SCHUL_NM=" + keyword;
	$.ajax({
		url: url,
		async: true,
		type: "POST",
		dataType: 'json',
		success: function(data){
			display(data);
		},
		error: function(request, textStatus){
			console.log("학교검색오류 ::: " + textStatus);
		}
	});
}

📂display

data를 table형식에 맞게 출력

function display(data){
	var table = $('#result_table');	
	var row = data.schoolInfo[1].row;	
	 $.each(row, function(index, rowData){
		var schoolName = rowData["SCHUL_NM"];
		var schoolAddressCode = rowData["ORG_RDNZC"];
		var schoolAddress = rowData["ORG_RDNMA"];
		var schoolTel = rowData["ORG_TELNO"];
		var schoolFound = rowData["FOND_YMD"];		
		var rowElement = $("<tr>");
  		var nameCell = $("<td>").text(schoolName);
		var addressCell = $("<td>").text(schoolAdd);
		var telCell = $("<td>").text(schoolTel);
		var addrCodeCell = $("<td>").text(schoolAddressCode).attr('hidden', true);
		var addrCell = $("<td>").text(schoolAddress).attr('hidden', true);
		var birthdayCell = $("<td>").text(schoolFound).attr('hidden', true);
		rowElement.append(nameCell);
		rowElement.append(addressCell);
		rowElement.append(telCell);
		rowElement.append(addrCodeCell);
		rowElement.append(addrCell);
		rowElement.append(birthdayCell);
  		table.append(rowElement);
	 });
}