728x90
test.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공공 데이터 API</title>
<script src="./test.js"></script>
</head>
<body>
<button id="btn">
클릭하세요! OO 도서 이벤트의 댓글 참가자와 당첨자를 볼 수 있습니다.
</button>
<br><br>
<div id="bookList"></div>
<br><br>
<div id="bookListWinner" style="font-weight: bold; color: red"></div>
</body>
</html>
test.js
window.onload = () => {
document.getElementById( 'btn' ).addEventListener( 'click', function() {
let json = {
"book": [
{ "isbn": "123-456-789",
"author": {
"name": "홍길동",
"email": "hong@hongkildong.com"
},
"editor": {
"name": "이순신",
"email": "lee@leesoonsin.com"
},
"title": "대한민국의 정의는 죽었는가?",
"category": [
"Non-Fiction", "IT", "Politics"
],
"picture": "images/test.jpg",
"description": "백두산 저자의 야심찬 신작! 절찬리에 판매중~",
"comments": [
{ "id": "정인봉", "text": "정의에 대해서 알 것 같습니다." },
{ "id": "김진경", "text": "무거운 주제를 무겁지 않게 써주셔서 감사합니다." },
{ "id": "홍수범", "text": "책 산날 제일 많이 읽었어요..ㅋㅋ" },
{ "id": "이정길", "text": "2권은 없나요? 또 쓰시면 또 구매할께요~" },
{ "id": "한상국", "text": "이벤트 때문에 구매했지만 없었어도 구매할 것 같습니다." },
{ "id": "유명준", "text": "너무 잘 읽었습니다. 감사합니다." },
{ "id": "신재원", "text": "대학생이라면 필독서~" }],
"comwinner": ["김진경", "이정길", "신재원"],
"add1": false,
"add2": true }
]
}
json = json["book"];
console.log( json.length ); // 1
console.log( json );
console.log( json.isbn ); // undefined
console.log( json[0].isbn );
console.log( json[0].editor );
console.log( json[0].category );
console.log( json[0].comments );
console.log( json[0].comments[0] ); // 첫 번째 요소
console.log( json[0].comments[json[0].comments.length-1] ); // 마지막 번째 요소
console.log( json[0].comments.length ); // 7
for( let i=0; i < json.length; i++ ) {
console.log( json[i].comments );
console.log( json[i].comwinner );
}
// ul 태그 노드 생성
let ul = document.createElement( 'ul' );
let bookList = document.getElementById( 'bookList' );
bookList.appendChild( ul );
for( let i=0; i < json.length; i++ ) {
for( let j=0; j < json[i].comments.length; j++ ) {
// 댓글 참가자
let bookComments = json[i].comments[j]
console.log( bookComments.id +" : "+ bookComments.text );
// li 태그 노드 생성
let li = document.createElement( 'li' );
// 텍스트 노드 생성
let txtNode = document.createTextNode( bookComments.id +" : "+ bookComments.text );
li.appendChild( txtNode );
ul.appendChild( li );
// 리스트에 붙이기
bookList.appendChild( ul );
// 당첨자
console.log( json[i].comwinner.join( ", " ) );
document.getElementById( 'bookListWinner' ).innerHTML = json[i].comwinner.join( ", " );
}
}
);
};
'JAVASCRIPT' 카테고리의 다른 글
| [JS] 실무 - chart.js 활용해서 그래프 만들어보기 - 개발자 배찌 (0) | 2022.10.07 |
|---|---|
| [js] api를 이용하여 정보 얻어내기 (jquery, json 활용) (0) | 2022.02.05 |
| [JS] JSON.parse(), JSON.stringify() _객체와 문자열로 변환하기 (0) | 2022.01.07 |
| [JS] 중첩된 JSON 데이터 다루기 (0) | 2022.01.07 |
| [JS] JSON 데이터를 다루기위한 JS 기본 사용법 (0) | 2022.01.07 |