[Html+JavaScript] 스크립트에서 테이블 생성하여 JSON 데이터 넣기/XML 데이터 넣기

스크립트에서 테이블 생성하여 JSON value값 넣기

 

json 예시

[
	{
		"title":"완전한 행복",
		"author":"정유정",
		"price":"14,200원"	
	},
	{
		"title":"혼자의 넓이",
		"author":"이문재",
		"price":"8,100원"	
	},
	{
		"title":"인간만세",
		"author":"오한기",
		"price":"11,700원"	
	},
	{
		"title":"빅버드",
		"author":"박기영",
		"price":"13,050원"	
	},
	{
		"title":"재와 물거품",
		"author":"김청귤",
		"price":"9,000원"	
	}
]

 

html 예시

<h2>책 목록표 JSON 받아오기</h2>
<table id="table" border="1" style="width: 25%"  cellpadding="5" rules="rows">
<tr>
	<th>제목</th><th>저자</th><th>가격</th>
</tr>
</table>

<script type="text/javascript">

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {

	if(xhttp.readyState == 4 && xhttp.status == 200){
		jsonfunc(this.responseText); 
	}
}
xhttp.open("GET","book.json", true);
xhttp.send();

function jsonfunc( jsonText ) {
	let arrTitle = new Array();
	let arrAuthor = new Array();
	let arrPrice = new Array();
	
	let json = JSON.parse(jsonText);

	for(i=0; i<json.length; i++){ // 값 전체 가져오는법
		arrTitle[i] = json[i].title;
		arrAuthor[i] = json[i].author;
		arrPrice[i] = json[i].price;
	}
	let table = document.getElementById('table');

	for(i=0; i<arrTitle.length; i++){
		let tr = document.createElement("tr");
		
		let td1 = document.createElement("td");			  
		td1.appendChild(document.createTextNode(arrTitle[i] + ""));
		
		let td2 = document.createElement("td");			 
		td2.appendChild(document.createTextNode(arrAuthor[i] + ""));
		
		let td3 = document.createElement("td");			 
		td3.appendChild(document.createTextNode(arrPrice[i]+ ""));
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		
		table.appendChild(tr);
	}
}
</script>

 

설명

• XML접근방법 설명글 : https://chlee21.tistory.com/117?category=944966 
• json 접근방법 설명글 : https://chlee21.tistory.com/119?category=944967
• appendChild 설명글 : https://chlee21.tistory.com/111?category=944127

new Array() : 테이블을 만들기 전 테이블에 뿌려줄 json value값을 넣기 위해 배열을 생성한다.

let json = JSON.parse(jsonText) : 변수를 지정하여 json 데이터를 파싱해준다.

for문을 사용하여 key값으로 접근 → 변수에 value값을 넣어준다.

for문을 사용하여 td태그에 값을 넣어주고 appendChild를 사용하여 데이터를 추가한다.

 

실행화면

---

XML 예시 : json데이터와 동일하다.

<?xml version="1.0" encoding="UTF-8"?>
<books>
	<book>
		<title>완전한 행복</title>
		<author>정유정</author>
		<price>14,200원</price>
	</book>
	<book>
		<title>혼자의 넓이</title>
		<author>이문재</author>
		<price>8,100원</price>
	</book>
	<book>
		<title>인간만세</title>
		<author>오한기</author>
		<price>11,700원</price>
	</book>
	<book>
		<title>빅버드</title>
		<author>박기영</author>
		<price>13,050원</price>
	</book>
	<book>
		<title>재와 물거품</title>
		<author>김청귤</author>
		<price>9,000원</price>
	</book>
</books>

 

html 예시 : 위 예제와 동일 구문이 많아 데이터 넣는 코드만 업로드 하였다.

// 위코드 json예제와 동일
xhttp.send();

function nodeValfunc( xml ) { // ( xml ) 객체 넘겨받기
	let arrTitle = new Array();
	let arrAuthor = new Array();
	let arrPrice = new Array();
	
	let title, author, price;
	let xmlDoc;

	xmlDoc = xml.responseXML; 
	
	title = xmlDoc.getElementsByTagName("title");
	author = xmlDoc.getElementsByTagName("author");
	price = xmlDoc.getElementsByTagName("price");

	for(i=0; i < title.length; i++){
		arrTitle[i] = title[i].childNodes[0].nodeValue;
		arrAuthor[i] = author[i].childNodes[0].nodeValue;
		arrPrice[i] = price[i].childNodes[0].nodeValue;
	}
    
    let table = document.getElementById('table');
// 아래코드 json예제와 동일

 

설명

new Array() : 테이블을 만들기 전 테이블에 뿌려줄 XML 데이터를 넣기 위해 배열을 생성한다.

xml.responseXML : xml문서의 데이터를 변수에 넣어줍니다.

title = xmlDoc.getElementsByTagName("title") : xmlDoc의 tag name명이 "title"인 요소의 node list를 넘겨받아 title에 넣어줍니다.

for문을 사용 → 배열에 childNodes[0].nodeValue로 접근하여 값을 넣어준다. 

 

실행화면은 json과 동일합니다.