반응형
[{
"title": "나무",
"author": "베르나르베르베르",
"price": 11520
},
{
"title": "지쳤거나 좋아하는 게 없거나",
"author": "강한별",
"price": 12150
},
{
"title": "오늘도 펭수 내일도 펭수",
"author": "펭수",
"price": 15300
},
{
"title": "좋은 날이야, 네가 옆에 있잖아",
"author": "이규영",
"price": 11700
}
]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="pid"> </p>
<table border="1">
<thead>
<th>제목</th>
<th>저자</th>
<th>가격</th>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
jsonFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "bookJSON.json", true);
xmlhttp.send();
function jsonFunction(resp) {
var arr = JSON.parse(resp);
var txt = "";
for (i = 0; i < arr.length; i++) {
var title = arr[i].title;
var author = arr[i].author;
var price = arr[i].price;
var thTitle = document.createTextNode(title);
var tdAuthor = document.createTextNode(author);
var tdPrice = document.createTextNode(price);
var tr = document.createElement("tr");
var th = document.createElement("th");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
th.appendChild(thTitle);
td1.appendChild(tdAuthor);
td2.appendChild(tdPrice);
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
document.getElementById("pid").innerHTML = txt;
};
</script>
</body>
</html>
반응형
'JavaScript > JSON' 카테고리의 다른 글
| Json 연동 (0) | 2020.01.15 |
|---|
