JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div class="result"></div>
<table>
	<tbody class="result2"></tbody>
</table>

CSS

table {
	border-collapse: collapse;
}
td {
	border:1px solid #000;
}
td:nth-child(1) { background: #fce4ec; }

JavaScript

var arr = [];
fetch('https://overless.vercel.app/api/kschool/v1/school?schoolName=대치')
.then(
  function(response) {
    if (response.status !== 200) {
      	console.log('Looks like there was a problem. Status Code: ' + response.status);
      	return;
    }

    response.json().then(function(data) {
    	var a="",b = data.data.schoolInfo[1].row.forEach(function(c) {
    		arr.push(c);
    		a += "<button style='display:block;' onclick='get_school(\""+ c.SD_SCHUL_CODE +"\")'>" + c.SCHUL_NM + " " + c.ENG_SCHUL_NM + "</button>";
    	});
    	document.querySelector(".result").innerHTML = a;
    });
  }
)
.catch(function(err) {
	console.log('Fetch Error :-S', err);
});

var get_school = function (v) {
	var school = arr.find(s => s.SD_SCHUL_CODE == v);
	var t = '';
	for (key in school) {
		t += "<tr><td>" + key + "</td><td>" + school[key] + "</td></tr>";
	}
	document.querySelector(".result2").innerHTML = t;
}