HTML
JSON <자신이 읽은 책 5권을 JSON파일로 제작후 테이블로 시각화 하기>
aesup
2021. 3. 9. 20:06
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id = "demo"></p>
<table border = "1" id = "tableS">
<col width = "100"><col width = "100"><col width = "100"><col width = "100">
</table>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200){
jsonFunc(this.responseText);
//this == xhttp
}
}
xhttp.open("GET","Book.json", true);
xhttp.send();
function jsonFunc(respTxt) {
//alert(respTxt);
let json = JSON.parse(respTxt);
let txt = "";
txt += "<tr>";
txt += "<th>번호</th>";
for (var i = 0; i < 1; i++) {
for(key in json[i]){
txt += "<th>" + key + "</th>";
}
}
txt += "</tr>";
/* let col_value = document.createElementTextNode(json[i]) */
document.getElementById("tableS").innerHTML = txt;
for(i = 0 ; i<=6 ; i++){
let row = document.createElement("tr");
let col = document.createElement("th");
let col_value = document.createTextNode(i+1);
//생성한 th칼럼에 col_value를 넣는다.(2)
col.appendChild(col_value);
row.appendChild(col);
col = document.createElement("td");
col_value = document.createTextNode(json[i].title);
col.appendChild(col_value);
row.appendChild(col);
col = document.createElement("td");
col_value = document.createTextNode(json[i].author);
col.appendChild(col_value);
row.appendChild(col);
col = document.createElement("td");
col_value = document.createTextNode(json[i].price);
col.appendChild(col_value);
row.appendChild(col);
tableS.appendChild(row);
}
//document.getElementById("demo").innerHTML = txt;
document.getElementById("demo").innerHTML = json.title;
}
</script>
</body>
</html>[
{
"title":"자바의정석",
"author":"남궁성",
"price":"20,000"
},
{
"title":"테슬라 모터스",
"author":"찰리모리스",
"price":"20,000"
},
{
"title":"슈퍼개미 김정환에게 배우는 나의 첫 투자 수업",
"author":"김정환",
"price":"30,000"
},
{
"title":"주린이가 가장 알고싶은 최다질문",
"author":"염승환",
"price":"16,200"
},
{
"title":"언어의온도",
"author":"이수만",
"price":"20,000"
}
]
728x90