XML
<body>
<div id="books">
</div>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
xmlFunc(this);
}
}
xhttp.open("GET", "books.xml", true);
xhttp.send();
function xmlFunc( xml ) {
let xmlDoc = xml.responseXML;
// alert(xmlDoc);
// root 취득
let rootTagName = xmlDoc.documentElement.nodeName;
// alert(rootTagName);
// node명을 취득
let nodeArr = xmlDoc.documentElement.childNodes;
// alert(nodeArr);
// node list를 확인
let nodeName;
for (i = 0; i < nodeArr.length; i++) {
if(nodeArr[i].nodeType == 1){
nodeName = nodeArr[i].nodeName;
// alert(nodeName);
}
}
// table 준비
let out = "<table border='1'>";
out += "<col width='50'><col width='100'><col width='140'><col width='100'>";
out += "<tr>";
out += "<th>번호</th>";
// column 명을 취득
columnName = xmlDoc.getElementsByTagName( nodeName )[0];
let child = columnName.firstChild;
// alert(columnName.childNodes.length);
for (var i = 0; i < columnName.childNodes.length; i++) {
if(child.nodeType == 1){
out += "<th>" + child.nodeName + "</th>";
// alert(child.nodeName);
}
child = child.nextSibling;
}
out += "</tr>";
// data 출력
let len = xmlDoc.getElementsByTagName(nodeName).length;
// alert(len);
for (i = 0; i < len; i++) {
out += "<tr>";
out += "<th>" + (i + 1) + "</th>";
let dataArr = xmlDoc.getElementsByTagName(nodeName)[i]; // nodeName == book
child = dataArr.firstChild;
for (j = 0; j < dataArr.childNodes.length; j++) {
if(child.nodeType == 1){
out += "<td>" + child.childNodes[0].nodeValue + "</td>";
}
child = child.nextSibling;
}
out += "</tr>";
}
out += "</table>";
document.getElementById('books').innerHTML = out;
}
</script>
</body>
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>배꼽</title>
<author>오쑈 라지니쉬</author>
<price>8,100</price>
</book>
<book>
<title>화폐전쟁</title>
<author>쑹훙빙</author>
<price>18,000</price>
</book>
<book>
<title>4차산업혁명</title>
<author>최진기</author>
<price>15,120</price>
</book>
<book>
<title>달러이야기</title>
<author>홍익희</author>
<price>22,500</price>
</book>
</books>
JSON
<body>
<div id="books">
</div>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
jsonFunc(this);
}
}
xhttp.open("GET", "books.json", true);
xhttp.send();
function jsonFunc( resp ) {
let jsonDoc = resp.responseText;
let arr = JSON.parse(jsonDoc); // String -> json
let out = "<table border='1'>";
out += "<col width='50'><col width='100'><col width='140'><col width='100'>";
out += "<tr>";
out += "<th>번호</th>";
for (k in arr[0]) { // key 값을 취득
out += "<th>" + k + "</th>";
}
out += "</tr>";
// datas 출력
for (var i = 0; i < arr.length; i++) {
out += "<tr>";
out += "<th>" + (i + 1) + "</th>";
/*
out += "<td>" + arr[i].title + "</td>";
out += "<td>" + arr[i].author + "</td>";
out += "<td>" + arr[i].price + "</td>";
*/
for(key in arr[i]){
out += "<td>" + arr[i][key] + "</td>";
}
out += "</tr>";
}
out += "</table>";
document.getElementById('books').innerHTML = out;
}
</script>
</body>
[
{
"title":"제4차산업혁명",
"author":"최진기",
"price":"15,120"
},
{
"title":"화폐전쟁",
"author":"쑹훙빙",
"price":"18,000"
},
{
"title":"달러이야기",
"author":"홍익희",
"price":"22,500"
},
{
"title":"배꼽",
"author":"오쏘 라지니쉬",
"price":"8,100"
}
]